Secondo esempio: Fx.Styles
Ora che abbiamo visto come creare un effetto totalmente personalizzato, vediamo come utilizzare le potenzialità di una classe che MooTools ci offre nativamente: Fx.Styles (http://docs.mootools.net/Effects/Fx-Styles.js). Come ho detto in precedenza, Fx.Styles permette di cambiare contemporaneamente il valore di un numero qualsiasi di proprietà CSS. Utilizzeremo le sue funzionalità in combinazione con il metodo chain per creare effetti a catena.
Ecco l'esempio in azione.
Viene dichiarata un'istanza di Fx.Styles e viene richiamato il metodo start più volte ogni volta con proprietà CSS e valori differenti:
var fx = new Fx.Styles('box', {duration:2500});
$('ok').addEvent('click', function(event) {
var event = new Event(event).stop();
fx.start({
'width': 560,
'height': 310,
'background-color': '#FFCC00',
'color': '#00CCCC',
'font-size': 22
}).chain(function() {
this.start({
'width': 260,
'height': 120,
'background-color': '#FF0000',
'color': '#FFFFFF',
'font-size': 16,
'margin-left': 100
});
}).chain(function() {
this.start({
'width': 420,
'height': 220,
'background-color': '#CCCCCC',
'color': '#FFFF00',
'font-size': 24,
'margin-left': 0,
'margin-top': 40
});
}).chain(function() {
this.start({
'width': 260,
'height': 120,
'background-color': '#FF00CC',
'color': '#0000FF',
'font-size': 14,
'margin-top': 0
});
});
});
Conclusione
In questo articolo abbiamo studiato tutte le potenti classi di effetti che MooTools ci mette a disposizione e, utilizzando le loro funzionalità, abbiamo creato un effetto totalmente personalizzato da utilizzare in applicazioni di nuova generazione. Abbiamo visto inoltre un esempio che mostra come sfruttare le potenzialità di Fx.Styles combinate con la chainabilty.
Nei prossimi articoli dedicati agli effetti vedremo come utilizzare altri costrutti importanti che ho presentato in questo articolo, come Fx.Elements, Fx.Scroll e Fx.Slide. Gli esempi visti sono disponibili per il download.
Ultimi articoli JavaScript
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida jQuery UICreare siti ricchi e dinamici con jQuery UI, il progetto ufficiale... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |