Più di 20 demo che mostrano effetti JQuery avanzati
Poco tempo fa, Flash era una delle tecnologie principali utilizzate dai web designer per aggiungere interattività a un sito web.
Dall'introduzione dell'iPad, con la sua mancanza di Flash Player, c'è un'accelerazione nel mondo dello sviluppo web di utilizzare tecnologie alternative a Flash, come jQuery, Ajax e altri.
Sebbene Flash sia ancora uno strumento molto potente e utile, che funziona in modo ottimale in molti casi, molti degli effetti che i web designer sono abituati a creare in Flash, possono essere facilmente implementati usando jQuery.
Ecco 21 demo online che mostrano la potenza di jQuery per la creazione di effetti e interattività avanzati che possono competere con Flash.
1. Flip! Un plugin jQuery
Questa demo riproduce la famosa tecnica di card flip che può ruotare un elemento di 360 gradi attorno al proprio asse x o y.
2. Plugin jQuery Quicksand
Questo è un ottimo plugin per l'ordinamento di una serie di elementi / icone su una pagina con effetti di dissolvenza in apertura / dissolvenza e animazione.
3. ImageFlow
Questo visualizzatore di immagini è simile all'interfaccia CoverFlow di Apple che è diventata così familiare nei vari prodotti e applicazioni.
4. Creazione di una mappa interattiva con jQuery anziché Flash
Questa demo unisce la potenza di jQuery con Ajax per creare davvero un'interfaccia accattivante.
5. Suggerimenti per lo slideout con jQuery e CSS3
Facendo clic sui simboli "+" vengono visualizzate ulteriori informazioni con un piacevole effetto di animazione.
6. Galleria Zoomer
In questa demo, ciò che sembra essere una statica regolare galleria di immagini viene data maggiore interattività utilizzando un effetto zoom multistrato quando si passa con il mouse su un'immagine.
7. jQuery Circulate
Questa demo mostra l'effetto Flash molto utilizzato di girare un'immagine intorno a una pagina - tutto fatto usando jQuery.
8. Effetto Zoom out fotografico
Questa demo sembra ingannevolmente semplice, ma dopo un ulteriore esame scoprirai che ci sono diversi livelli nella complessità dell'effetto zoom-out.
9. Scatole scorrevoli e didascalie con jQuery
Qui vediamo come è possibile creare potenti transizioni usando jQuery, una tecnica riservata solo agli sviluppatori Flash.
10. Galleria Lightbox CSS3
Questo plugin sembra che sia stato scritto specificamente per i social media. Trascinando e rilasciando una foto in cima alla "casella di condivisione" si aprirà una finestra modale che può essere l'interfaccia per chiamare un'API tramite AJAX che può consentire all'utente di condividere una foto su Flickr, Twitter, Facebook e altri siti.
11. Fare un effetto Photoshoot con jQuery e CSS
Anche se a prima vista questa demo può sembrare un vero piacere per gli occhi, potrebbe essere uno strumento molto potente per lavorare con immagini di grandi dimensioni se accoppiato con l'archiviazione locale AJAX o HTML5.
12. Incredibile navigazione Bubble
Qui lo sviluppatore fa un buon uso delle transizioni di colore e dell'animazione per produrre un menu molto attraente e interattivo.
13. Bella navigazione di sfondo
In questa demo, ogni azione dell'utente attiva diverse transizioni che agiscono tutte per immergere completamente l'utente nell'interfaccia.
14. AviaSlider
AviaSlider utilizza effetti di transizione classici simili a quelli di Flash per migliorare quella che sembrerebbe un'interfaccia di scorrimento standard.
15. Slideshow immagine di sfondo
Gli sfondi animati sono una delle aree in cui Flash era solito dominare nel web design. Ecco un esempio usando invece jQuery.
16. Slideshow Panning
Un'altra interpretazione unica della tipica interfaccia di presentazione. Qui l'autore aggiunge la navigazione diagonale per ravvivare l'interfaccia e farla risaltare.
17. jqFancyTransitions
Questo plugin può essere utilizzato per visualizzare le tue foto come una presentazione con effetti di transizione fantasiosi simili a quelli di Flash.
18. iCarousel - Cursore delle immagini orizzontali
Un'altra presentazione che aggiunge solo un tocco di alleggerimento per far risaltare le transizioni. Non c'è da meravigliarsi che abbiano scelto di mostrare i prodotti Mac sexy in questa demo.
19. Realizzare un'immagine interattiva con jQuery
Questa demo può essere utilizzata per sfruttare i siti Web in cui vi è molto spazio sullo schermo. Facendo clic su una sezione del sito Web viene visualizzata una casella modale che visualizza ulteriori informazioni sulla sezione selezionata.
20. Zoom cloud
Un plug-in che sembra progettato per l'eCommerce. Cloud Zoom è facile da implementare e può davvero migliorare l'esperienza dell'utente.
21. Effetto retina simile alla mela
Chiunque abbia utilizzato un iPhone, iPod touch o iPad ha familiarità con il "Retina View" che ingrandirà una piccola area sullo schermo quando si tocca l'area per un lungo periodo di tempo. Questa demo implementa questo effetto per il desktop.
Compilato in esclusiva per WDD da Kalim Fleet . È un web designer professionista e blogger con oltre 6 anni di esperienza. Il web è la sua passione mentre si divide tra scrittura di blog, sviluppo di software e social media. Ama usare e sviluppare nuove applicazioni per il web, i dispositivi mobili e il desktop.
Conoscete altri grandi esempi di effetti jQuery che possono competere con il potere di Flash? Hai mai suggerito effetti jQuery su Flash quando i tuoi clienti li richiedono? Si prega di condividere le vostre opinioni ed esempi qui sotto!