10 incredibili tecniche ed esempi di Animazione con jQuery

di Redazione 3

Alcuni esempi e tecniche per creare animazioni con jQuery..

jQuery-animation-list-mrFlock

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

photo-revealer

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

01-10_jquery_mouse_movement

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

photo-revealer

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

Menu animato in jQuery

jQuery-menu

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

Live Demo

Sbuffi di fumo in jQuery

01-02_puffing_smoke

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

01-07_jquery_blend

Live Demo

Animazione su Testo al passaggio del mouse

12-15_mouseover_animatoon

Live Demo

Effetto hover con jQuery

01-04_jquery_hover

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

01-06_scrolling_background

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

Live Demo

Animazioni con Glimmer

01-05_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.

Commenti (3)

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>