Moo.fx – Una classe tutto-fare

Moo.fx è una classe scritta in Javascript dall’italiano Valerio Proietti – http://mad4milk.net – e fa uso della classe prototype lite di Sam Stephenson.

Ma vediamo a che cosa serve e come si può utilizzare.

Moo.fx abbiamo detto che è una classe e si occupa di applicare effetti di transizione agli elementi di una pagina XHTML.
Gli effetti vanno dal fade in/fade out alla ridimensione degli elementi e l’effetto gradevole è assicurato, non ha niente da invidiare alle animazioni fatte con Macromedia Flash.
Si possono vedere degli esempi direttamente sul sito dell’autore, dove la navigazione è completamente gestita dalla classe moo.fx – http://moofx.mad4milk.net/.

Ma vediamo come poterla implementare nel nostro sito. Come esempio prendiamo un menu verticale e facciamo conto che abbiamo una voce, galleria, con un sotto menu che vorremo far apparire con un’effetto di scorrimento usando moo.fx.

Partiamo con l’includere i file .js necessari all’interno della nostra pagina XHTML all’interno del tag <head>.

<script type="text/javascript" src="prototype.lite.js"></script>
<script type="text/javascript" src="moo.fx.js"></script>
<script type="text/javascript" src="moo.fx.pack.js"></script>

a questo punto andiamo a creare il nostro menu utilizzando una semplice lista:

<ul id="globalNav">
  <li><a href="#">Home Page </a></li>
  <li><a href="#">Progetti</a></li>
  <li><a href="#">Galleria</a></li>
    <ul id="sottocategoria">
    <li><a href="#">Elemento 1 </a></li>
    <li><a href="#">Elemento 2 </a></li>
    <li><a href="#">Elemento 3 </a></li>
  </ul>
  </li>
  <li><a href="#">Contatti</a></li>
</ul>

Ed ecco il nostro bel menu pronto. Come notate, ho inserito un’altra lista all’interno di un’elemento <li> per creare il sottomenu. Adesso faremo scomparire la lista all’interno della voce “galleria” usando questa regola di css:

#sottocategoria { height: 0px; }

Non ci rimane che creare l’oggetto necessario per implementare l’effetto. Andiamo quindi ad inserire all’interno del tag <head> il seguente codice:

<script type="text/javascript">
var myEffect;
function init() {
	myEffect = new fx.Height('sottocategoria' , { duration: 500 });
}
</script>

Ecco creato quindi l’oggetto che si occuperà di animare l’elemento specificando anche il suo metodo, in questo caso height (perchè andrà ad animare il menu nella sua altezza – da qui l’impostazione di height: 0px; nel nostro css per rendere l’oggetto inizialmente nascosto), con i suoi argomenti: l’id dell’elemento animato e la sua durata.

Adesso dobbiamo far eseguire la funzione init() non appena si è caricata la pagina, quindi andremo ad aggungere una nuova riga di codice all’interno dello script di cui sopra facendo venire il tutto come descritto di seguito:

<script type="text/javascript">
var myEffect;
function init() {
	myEffect = new fx.Height('sottocategoria' , { duration: 500 });
}
window.onload = function() { init(); }
</script>

A questo punto, appena la pagina è stata caricata, verrà avviata la nostra funzione, ma adesso dobbiamo fare in modo che, una volta cliccato sul bottone “galleria”, si avvii l’animazione tanto desiderata. Per farlo, basta inserire l’attributo onclick all’interno dell’elemento <a> del nostro bottone, vediamo:

<a href="#" onclick="myEffect.toggle(); return false;" >Galleria</a>

Pronti! Carichiamo la pagina e ammiriamo lo splendio lavoro creato da Valerio Proietti.

Per qualunque altra informazione potete postare i vostri commenti.

Leave a Reply