Leonardo.it

Che jQuery permetta di fare di tutto è forse un pò eccessivo ma questo framework per il web sviluppato in javascript è veramente una bomba e le prossime 10 tecniche che vedremo ve lo dimostreranno.

In questo post vedremo alcuni utilizzi particolarmente innovativi di jQuery nell’animazione di elementi web.

Fantastico effetto su immagini

Il passaggio del mouse sull’immagine la divide in 4 pezzi si spostano gradualmente verso gli angoli e rivelano un’altra immagine sotto di essa. Un’animazione veramente molto bella e adatta a molti scopi.

Live Demo

Immagini che seguono il mouse in jQuery

Con questa tecnica potretre far seguire a delle immagini i movimenti del mouse. L’effetto è molto bello e con un pò di fantasia è possibile realizzare animazioni veramente belle.

Live Demo

Photo Slider con jQuery

Al click sull’immagine si rivela un area nascosta. Un effetto visivamente molto interessante e con molte applicazioni.
Live Demo

Menu animato in jQuery

Uno splendido esempio di come si può realizzare un menu con le potenzialità offerte da jQuery.

Live Demo

Sbuffi di fumo in jQuery

Il primo esempio è sviluppato da Gaya Kessler, sviluppatore web olandese, che vi mostra come è possibile simulare un simpatico effetto d’animazione con nuvolette che escono da una fabbrica.

Live Demo

jQuery Blend

Live Demo

Animazione su Testo al passaggio del mouse

Live Demo

Effetto hover con jQuery

Impariamo a creare dei spettacolari pulsanti, nei quali il riflesso o l’ombra sono dinamiche rispetto al movimento dell’immagine.

Live Demo

Animazione dello sfondo in jQuery

DaTe dinamicità al vostro sito con una bellissima animazione dello sfondo.

Live Demo

Animazioni con Glimmer

Glimmer è uno strumentoi per la creazione di animazioni Javascript che sfrutta jQuery. Come potete vedere ci sono tre live demo, essi rappresentano solo alcune delle cose che si possono fare con l’applicazione.

Live Demo: Freestyle Sample, Image Sequence Sample, Fade Text Sample

a presto.MrFlock.

3 risposte a 10 incredibili tecniche ed esempi di Animazione con jQuery

1. 10 tecniche jQuery per migliorare il vostro sito web scrive:

   4 maggio 2010 alle 09:51

   [...] Cercate di non esagerate nell’utilizzo di jQuery, non riempite le pagine di effetti perchè otterrete infatti l’effetto contrario a quello cercato. Provate a gurdare anche queste tecniche per fare animazioni con jQuery. [...]

   Replica
2. 6 nuovi jQuery plugins e tutorials scrive:

   9 maggio 2011 alle 09:18

   [...] nella sua facilità di apprendimento, le incredibili animazioni che permette ( Guarda » 10 incredibili tecniche ed esempi di Animazione con jQuery) e le infinite possibilità di estensione. Partendo da questo ultimo punto oggi vi presentiamo una [...]

   Replica
3. Esempi jquery, 6 demo di nuove tecniche di animazione scrive:

   31 maggio 2011 alle 08:41

   [...] – 10 incredibili tecniche ed esempi di Animazione con jQuery [...]

   Replica