Oggi vorrei parlarvi di Flip! un plugin per jQuery che fa ruotare o “flippare”  contenuti ed elementi.

L’installazione è semplice, di seguito un mini-tutorial su installazione ed utilizzo.

Installazione

Aggiungete le librerie jQuery e jQuery UI nell’head della pagina :

<script type=”text/javascript” src=”js/jquery-1.3.2.min.js“></script>
<script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js“></script>

Ora aggiungete nell’head anche il file javascript del plugin :

<script type=”text/javascript” src=”js/jquery.flip.js“></script>

ed anche il file css del plugin :

<link rel="stylesheet" type="text/css" href="reset_html5.css"/>
<link rel="stylesheet" type="text/css" href="flip_099.css"/>

Come si usa?
Per avviarlo basta inserire il codice javascript :

$("#mydiv").flip({
    direction:'tb'
});

Opzioni del plugin

Le opzioni che si possono inserire sul plugin sono:

- la direzione dell’animazione :

• direction :  ‘tb’ ; top-bottom, cioè da sopra a sotto
• direction : ‘bt’ ; bottom-top, cioè da sotto a sopra
• direction : ‘lr’ ; left-right, cioè da sinistra a destra
• direction : ‘rl’ ; right-left, cioè da destra a sinistra

- il contenuto da visualizzare dopo l’animazione :

• content : ‘contenuto’

- il colore da visualizzare dopo l’animazione :

• color : ‘#ff0000′

- la velocità dell’animazione in millisecondi :

• speed : 1000

- i gestori degli eventi dell’animazione :

• onBefore : codice ; quello che succede prima dell’animazione
• onAnimation : codice ; quello che succede durante l’animazione
• onEnd : codice ; quello che succede quando l’animazione è terminata

Oltre alla funzione di base flip() esiste la funzione revertFlip(), che esegue l’animazione in direzione opposta alla sua esecuzione.

Il plugin è stato realizzato da Luca Manno, web developer di Ex Machina in quel di Lugano (Svizzera).