Animazioni CSS con MooTools
Venerdì 16 Maggio 2008 - 10:06
di Riccardo Degni
Dopo i diversi articoli che abbiamo dedicato alle evoluzioni CSS offerte dai browser di nuova generazione come i gradienti e le maschere di WebKit, sappiamo come con poche righe di semplice codice CSS si possano creare animazioni molto interessanti.
Unire la creazione di animazioni tramite righe di un foglio di stile e gli effetti Fx del framework MooTools è stata l’idea di Chris Schneider. In questa demo sono presenti diversi esempi con cui è possibile visualizzare il tutto in azione.
In parole semplici, vengono utilizzate le pseudo-classi per settare istanze Fx riguardanti determinati elementi presi in considerazione con i normali selettori CSS, in combinazione con proprietà e stili personalizzati come -moofx: long width !important; o -moofx-transition: linear;. In questo articolo, l’autore ci spiega come utilizzare gli stili custom e ci fornisce il link allo script che fa un uso massiccio di Regular Expressions.
La compatibiltà è estesa a tutte le ultime versioni stabili dei maggiori framework, come Firefox 2, Safari 3 e Internet Explorer 7. Ovvviamente IE6 è escluso dalla lista dato che non supporta le pseudo-classi dinamiche.
Categoria: Scripting | Permalink
sponsor
Commenti
1
Perchè sporcare i fogli stile… è meglio mettere tutto dentro un bel file.js dove si dichiarano le varie animazioni.
2
Le applicazioni sono molto carine ed interessanti..bisognerebbe implementarle di tanto in tanto..
3
Sono pienamente d’accordo con giuseppe. Abbiamo a disposizione moltissime applicazioni ottime e alcune troppo sottovalutate.
# - postato da Razr - 17 Maggio 2008 - 12:22
4
Molto molto interessante…
Sarebbero anche utilizzabili se non fosse per IE 6…# - postato da Andrea (Epper) - 18 Maggio 2008 - 02:48