In un esempio recente su questo blog ho mostrato come ottenere un’effetto slide verticale (simulando un’illusione di movimento grazie ad alcune immagini ad-hoc).

Qualcuno mi chiede se è possibile realizzarlo anche con un’interpolazione orizzontale: niente di più facile, MooTools mette a disposizione delle classi che facilitano il lavoro (Fx.Slide, invece del semplice tween utilizzato nell’esempio precedente):

Codice Javascript

slider = new Fx.Slide($('fx-h'),
{
		duration:1000,
		transition: Fx.Transitions.linear,
		mode: 'horizontal'
}).hide();

Questa classe non fa altro che applicare l’interpolazione dalla lunghezza originale a zero.
Nei parametri definiti tra parentesi graffe andiamo a definire proprio il metodo (quello di default è verticale) e altri parametri (Vedi la documentazione ufficiale).
Il metodo hide() finale serve a definire lo stato iniziale dell’elemento.

Per attivare l’animazione sarà sufficiente chiamare la funzione toggle():

slider.toggle();

E’ disponibile la Demo e relativo download.

Demo Download