20 + Demoer viser avanserte JQuery-effekter
For en kort stund siden var Flash en av de primære teknologiene som brukes av webdesignere for å legge til interaktivitet på et nettsted.
Siden innføringen av iPad, med mangel på Flash Player, er det en akselerasjon i webutviklingsverdenen for å bruke alternative teknologier til Flash, for eksempel jQuery, Ajax og andre.
Selv om Flash fortsatt er et veldig kraftig og nyttig verktøy, som fungerer bra i mange tilfeller, kan flere av de effektene webdesignere er vant til å lage i Flash, like enkelt implementeres ved hjelp av jQuery.
Her er 21 online demoer som viser kraften til jQuery for å skape avanserte effekter og interaktivitet som kan konkurrere med Flash.
1. Flip! En jQuery-plugin
Denne demoen etterligner den populære kortflipteknikken som kan rotere et element 360 grader rundt sin egen x eller y-akse.
2. jQuery Quicksand plugin
Dette er et flott plugin for sortering av en rekke elementer / ikoner på en side med fin fade-in / fade-out og animasjonseffekter.
3. ImageFlow
Denne bildeviseren ligner Apples CoverFlow-grensesnitt som har blitt så kjent i sine ulike produkter og applikasjoner.
4. Bygg et interaktivt kart med jQuery i stedet for Flash
Denne demoen slutter seg til kraften til jQuery med Ajax for å virkelig skape et engasjerende grensesnitt.
5. Slideout Tips Med jQuery & CSS3
Ved å klikke på "+" -symbolene, vises ytterligere informasjon med en fin jevn animasjonseffekt.
6. Zoomer Gallery
I denne demonstrasjonen ser det ut til å være en vanlig statisk bildegalleri Gis litt ekstra interaktivitet ved å bruke en flerlagszoom-effekt når du svinger over et bilde.
7. jQuery sirkulere
Denne demoen viser den mye brukte Flash-effekten av å sirkle et bilde rundt en side - alt gjort ved hjelp av jQuery.
8. Photo Zoom Out Effect
Denne demoen ser ut til å være misvisende, men etter ytterligere undersøkelse finner du at det er flere lag på kompleksiteten til zoom-out-effekten.
9. Glidebokser og bildetekster med jQuery
Her får vi se hvor kraftige overganger kan opprettes ved hjelp av jQuery, en teknikk en gang reservert kun for Flash-utviklere.
10. CSS3 Lightbox Gallery
Dette pluginet ser ut som det var skrevet spesielt for sosiale medier. Å dra og slippe et bilde på toppen av "delingsboksen" åpner et modalvindu som kan være grensesnittet for å ringe en API via AJAX som kan tillate brukeren å dele et bilde på Flickr, Twitter, Facebook og andre nettsteder.
11. Lag en Photoshoot-effekt med jQuery & CSS
Selv om denne demonstrasjonen kan virke som øye-godter ved første øyekast, kan det være et meget kraftig verktøy for å jobbe med store bilder når det kombineres med AJAX eller HTML5 lokal lagring.
12. Fantastisk Bubble Navigasjon
Her bruker utvikleren god bruk av fargeoverganger og animasjoner for å produsere en meget attraktiv og interaktiv meny.
13. Vakker bakgrunnsbilde navigasjon
I denne demonstrasjonen utløser hver brukerhandling flere overganger, som alle fungerer for å nedsette brukeren helt i grensesnittet.
14. AviaSlider
AviaSlider bruker klassiske Flash-lignende overgangseffekter for å forbedre det som ser ut til å være et standard glidebrytergrensesnitt.
15. Bakgrunnsbildefremvisning
Animerte bakgrunner er et av områdene hvor Flash pleide å dominere i webdesign. Her er et eksempel ved hjelp av jQuery i stedet.
16. Panning Slideshow
En annen unik ta på den typiske lysbildeseriegrensesnittet. Her legger forfatteren diagonal navigasjon til å krysse grensesnittet og for å få det til å skille seg ut.
17. jqFancyTransitions
Denne plugin kan brukes til å vise bildene dine som en lysbildeserie med fancy Flash-lignende overgangseffekter.
18. iCarousel - skyveknapp med horisontale bilder
En annen lysbildefremvisning som bare legger til en lettelse for å gjøre overgangen virkelig skiller seg ut. Det er ikke rart at de valgte å fremheve sexy Mac-produkter i denne demoen.
19. Lag et interaktivt bilde med jQuery
Denne demoen kan brukes til å utnytte nettsteder der det er mye skjermrom. Ved å klikke på en del av nettsiden avsløres en modal boks som viser mer informasjon om den klikkte delen.
20. Cloud Zoom
Et plugin som ser ut som det ble designet med eCommerce i tankene. Cloud Zoom er enkelt å implementere og kan virkelig forbedre brukerens opplevelse.
21. Apple-lignende Retina Effect
Alle som har brukt en iPhone, iPod touch eller iPad, er kjent med "Retina View" som vil forstørre et lite område på skjermen når du berører området i lengre tid. Denne demoen implementerer denne effekten på skrivebordet.
Utarbeidet utelukkende for WDD av Kalim Fleet . Han er profesjonell webdesigner og blogger med over 6 års erfaring. Internett er hans lidenskap når han deler sin tid mellom blogging, programvareutvikling og sosiale medier. Han elsker å bruke og utvikle nye applikasjoner for Internett, mobil og skrivebord.
Kjenner du til andre gode eksempler på jQuery-effekter som kan konkurrere med kraften til Flash? Har du noen gang foreslått jQuery-effekter over Flash når kundene ber om dem? Vennligst del dine synspunkter og eksempler nedenfor!