20 + Demos Visar avancerade JQuery-effekter
För ett tag sedan var Flash en av de främsta teknikerna som webbdesigners använde för att lägga till interaktivitet på en webbplats.
Sedan introduktionen av iPad, med bristen på Flash Player, finns det en acceleration i webbutvecklingsvärlden för att använda alternativ teknik till Flash, som jQuery, Ajax och andra.
Även om Flash fortfarande är ett mycket kraftfullt och användbart verktyg, vilket fungerar bra i många fall, kan flera av de effekter som webbdesigners vana att skapa i Flash, lika enkelt implementeras med jQuery.
Här är 21 online-demos som visar kraften i jQuery för att skapa avancerade effekter och interaktivitet som kan konkurrera med Flash.
1. Flip! Ett jQuery-plugin
Denna demo mimar den populära kortvipptekniken som kan rotera ett element 360 grader runt sin egen x- eller y-axel.
2. jQuery Quicksand plugin
Det här är ett bra plugin för att sortera en rad element / ikoner på en sida med fina in / uttoningar och animeringseffekter.
3. ImageFlow
Denna bildvisare liknar Apples CoverFlow-gränssnitt som har blivit så bekant i sina olika produkter och applikationer.
4. Bygg en interaktiv karta med jQuery istället för Flash
Denna demo förenar kraften i jQuery med Ajax för att verkligen skapa ett engagerande gränssnitt.
5. Slideout Tips med jQuery & CSS3
Att klicka på symbolerna "+" avslöjar ytterligare information med en fin jämn animationseffekt.
6. Zoomer Gallery
I denna demo verkar det vara en vanlig statisk Bildgalleri ges lite extra interaktivitet genom att använda en flerskiktszoeffekt när den svävar över en bild.
7. jQuery Circulate
Denna demo visar den mycket använda Flash-effekten av att cirkla en bild runt en sida - allt gjort med jQuery.
8. Bildzoom ut Effekt
Denna demo ser bedrägligt enkelt ut, men vid ytterligare undersökning finner du att det finns flera lager på komplexiteten hos zoom-out-effekten.
9. Glidlådor och bildtext med jQuery
Här får vi se hur kraftfulla övergångar kan skapas med jQuery, en teknik som en gång reserverats endast för Flash-utvecklare.
10. CSS3 Lightbox Galleri
Denna plugin ser ut som om den skrevs speciellt för sociala medier. Om du drar och släpper ett foto ovanför "delningsfältet" öppnas ett modalfönster som kan vara gränssnittet för att ringa ett API via AJAX som kan tillåta användaren att dela ett foto på Flickr, Twitter, Facebook och andra webbplatser.
11. Gör en Photoshoot-effekt med jQuery & CSS
Även om denna demo kan verka som ögonkyta vid första anblicken kan det vara ett mycket kraftfullt verktyg för att arbeta med stora bilder när det kombineras med AJAX eller HTML5 lokal lagring.
12. Awesome Bubble Navigation
Här använder utvecklaren god användning av färgövergångar och animeringar för att skapa en mycket attraktiv och interaktiv meny.
13. Vacker bakgrundsbildsnavigering
I den här demonstrationen utlöser varje användaraktivitet flera övergångar som alla verkar för att helt fördjupa användaren i gränssnittet.
14. AviaSlider
AviaSlider använder klassiska Flash-liknande övergångseffekter för att förbättra vad som verkar vara ett vanligt slidgränssnitt.
15. Bakgrundsbildspel
Animerade bakgrunder är ett av de områden där Flash brukade dominera i webbdesign. Här är ett exempel med jQuery istället.
16. Panning Bildspel
En annan unik ta det typiska bildspelet gränssnittet. Här lägger författaren till diagonal navigering för att krydda gränssnittet och för att få det att stå ut.
17. jqFancyTransitions
Denna plugin kan användas för att visa dina foton som ett bildspel med snygga Flash-liknande övergångseffekter.
18. iCarousel - horisontell bildreglage
Ett annat bildspel som bara ger en lättare upplösning för att göra övergångarna verkligen uppenbara. Det är inte konstigt att de valde att presentera sexiga Mac-produkter i den här demo.
19. Skapa en interaktiv bild med jQuery
Denna demo kan användas för att dra nytta av webbplatser där det finns mycket skärmutrymme. Genom att klicka på en del av webbplatsen visas en modalbox som visar mer information om den klickade sektionen.
20. Cloud Zoom
Ett plugin som ser ut som det utformades med e-handel i åtanke. Cloud Zoom är lätt att implementera och kan verkligen förbättra användarens upplevelse.
21. Apple-liknande Retina Effect
Den som har använt en iPhone, iPod touch eller iPad känner till "Retina View" som förstorar ett litet område på skärmen när du rör på området under en längre tid. Denna demo implementerar denna effekt för skrivbordet.
Kompilerad uteslutande för WDD av Kalim Fleet . Han är en professionell webbdesigner och bloggare med över 6 års erfarenhet. Webben är hans passion när han delar sin tid mellan bloggskrivning, mjukvaruutveckling och sociala medier. Han älskar att använda och utveckla nya applikationer för webben, mobilen och skrivbordet.
Känner du till några andra bra exempel på jQuery-effekter som kan konkurrera med kraften i Flash? Föreslår du någonsin jQuery-effekter över Flash när dina kunder begär dem? Vänligen dela dina åsikter och exempel nedan!