20 + Demoer viser avancerede JQuery-effekter
For blot et øjeblik siden var Flash en af de primære teknologier, som webdesignere brugte til at tilføje interaktivitet til et websted.
Siden indførelsen af iPad, med sin mangel på Flash Player, er der en acceleration i webudviklingsverdenen til at bruge alternative teknologier til Flash, som jQuery, Ajax og andre.
Selvom Flash stadig er et meget kraftfuldt og nyttigt værktøj, som fungerer fint i mange tilfælde, kan flere af de effekter, som webdesignere er vant til at skabe i Flash, lige så let implementeres ved hjælp af jQuery.
Her er 21 online demoer, der viser kraften i jQuery til at skabe avancerede effekter og interaktivitet, der kan konkurrere med Flash.
1. Flip! Et jQuery-plugin
Denne demo efterligner den populære kort-flip-teknik, der kan rotere et element 360 grader omkring sin egen x eller y-akse.
2. jQuery Quicksand plugin
Dette er et godt plugin til sortering af en række elementer / ikoner på en side med nice fade-in / fade-out og animation effekter.
3. ImageFlow
Denne billedfremviser ligner Apples CoverFlow interface, der er blevet så kendt i deres forskellige produkter og applikationer.
4. Opbygning af et interaktivt kort med jQuery i stedet for Flash
Denne demo slutter kraften i jQuery med Ajax for virkelig at skabe en engagerende grænseflade.
5. Slideout Tips med jQuery & CSS3
Ved at klikke på "+" -symbolerne afsløres yderligere informationer med en fin, jævn animationseffekt.
6. Zoomer Gallery
I denne demo synes der at være en regelmæssig statisk billedgalleri Giver nogle ekstra interaktivitet ved at bruge en multi-layer zoom-effekt, når du svinger over et billede.
7. jQuery Circulate
Denne demo viser den meget brugte Flash-effekt af at cirkulere et billede omkring en side - alt er gjort ved hjælp af jQuery.
8. Photo Zoom Out Effect
Denne demo ser utroligt enkelt ud, men efter yderligere undersøgelse finder du, at der er flere lag til kompleksiteten af zoom-out-effekten.
9. Glidebokse og billedtekster med jQuery
Her får vi se, hvordan kraftige overgange kan oprettes ved hjælp af jQuery, en teknik, der kun er forbeholdt Flash-udviklere.
10. CSS3 Lightbox Galleri
Denne plugin ligner, at den blev skrevet specifikt til sociale medier. Ved at trække og slippe et billede oven på "share box" åbnes et modalt vindue, der kan være grænsefladen for at kalde en API via AJAX, som kan give brugeren mulighed for at dele et billede på Flickr, Twitter, Facebook og andre websteder.
11. Gør en Photoshoot-effekt med jQuery & CSS
Selvom denne demo kan virke som øjen-candy ved første øjekast, kan det være et meget kraftfuldt værktøj til at arbejde med store billeder, når det kombineres med AJAX eller HTML5 lokal lagring.
12. Awesome Bubble Navigation
Her gør udvikleren god brug af farveovergange og animation til at producere en meget attraktiv og interaktiv menu.
13. Smuk baggrundsbilled navigation
I denne demo udløser hver brugerhandling flere overgange, som alle virker for at nedsætte brugeren helt i grænsefladen.
14. AviaSlider
AviaSlider bruger klassiske Flash-lignende overgangseffekter til at forbedre, hvad der ser ud til at være en standard skyder-grænseflade.
15. Baggrundsbillede Slideshow
Animerede baggrunde er et af de områder, hvor Flash plejede at dominere i webdesign. Her er et eksempel ved hjælp af jQuery i stedet.
16. Panning Diasshow
En anden unik tag på den typiske diasshow-grænseflade. Her tilføjer forfatteren diagonal navigation for at krydre grænsefladen og gøre det skiller sig ud.
17. jqFancyTransitions
Dette plugin kan bruges til at vise dine billeder som et diasshow med fancy Flash-lignende overgangseffekter.
18. iCarousel - skyderen med vandret billede
Et andet lysbilledshow, der tilføjer blot et strejf af lettelse for at gøre overgangen virkelig skiller sig ud. Det er ikke underligt, at de valgte at fremvise sexede Mac-produkter i denne demo.
19. Lav et interaktivt billede med jQuery
Denne demo kan bruges til at udnytte websteder, hvor der er masser af skærmrum. Ved at klikke på et afsnit på hjemmesiden vises en modal boks, der viser flere oplysninger om den klikte sektion.
20. Cloud Zoom
Et plugin der ligner det blev designet med eCommerce i tankerne. Cloud Zoom er nem at implementere og kan virkelig forbedre brugerens oplevelse.
21. Apple-lignende retina-effekt
Enhver, der har brugt en iPhone, iPod touch eller iPad, er bekendt med "Retina View", som vil forstørre et lille område på skærmen, når du berører området i længere tid. Denne demo implementerer denne effekt til skrivebordet.
Kompileret udelukkende til WDD af Kalim Fleet . Han er en professionel webdesigner og blogger med over 6 års erfaring. Internettet er hans lidenskab, da han deler sin tid mellem blogskrivning, softwareudvikling og sociale medier. Han elsker at bruge og udvikle nye applikationer til internettet, mobilen og skrivebordet.
Kender du til andre gode eksempler på jQuery-effekter, der kan konkurrere med kraften i Flash? Foreslår du nogensinde jQuery-effekter over Flash, når dine kunder anmoder om dem? Venligst del dine synspunkter og eksempler nedenfor!