A volte si perde tempo cercando di creare effetti semplici con javascript, magari aiutandosi con jQuery, per poi scoprire che il tutto sarebbe stato molto più semplice facendo semplicemente affidamento su altri strumenti, più adatti a questo genere di cose. Mi riferisco a piccoli effetti grafici, che spesso possono essere gestiti direttamente da CSS3 in modo estremamente più semplice rispetto a qualunque script o plugin fatto in javascript.

Andiamo con ordine: avevo la necessità di creare un semplice effetto di zoom passando con il mouse sopra gli elementi di un menu ed avevo pensato, inizialmente, di crearlo con jQuery. Non è un'operazione complessa, ma può diventare tediosa e visto che alla fin fine si tratta solo di manipolare alcuni stili CSS ho pensato: ma se lo facessi direttamente con i css3? D'altra parte, ormai le animazioni sono supportate dalla maggior parte dei browser...

Il risultato lo puoi vedere qui: http://goo.gl/Fo30t

Come funziona? In realtà è molto semplice.

Ho impostato uno stile a #test li, che descrive la grafica di default degli elementi del menu e -bada bene- quella a cui bisogna tornare quando finisce l'hover. In queste righe ho quindi inserito anche le istruzioni per l'animazione di ritorno alla grafica standard: transition: all .1s ease-in;

Poco sotto ho impostato la grafica che deve essere utilizzata nell'effetto hover: voglio quindi che il box venga zoomato al 130% (transform: scale(1.3)) nell'arco di 2 secondi (transition: all .2s ease-out;), e che venga spostato leggermente più in alto per dargli un effetto più "rimbalzante" (position:relative; top: -5px;).

Tutto qui. Non c'è davvero nient'altro da dire, è di una semplicità disarmante ed il bello è che questo genere di animazioni è supportato nativamente dalla maggior parte dei browser (utilizzando i consueti prefissi -ms, -o, -moz e -webkit, per ora).

Ovviamente sulle vecchie versioni di internet explorer il menu non funziona, ma... è ancora così importante?