Corsi on-line

Ruotare un elemento con jQuery e Flip!

Nel realizzare un’interfaccia utente per un cliente mi sono imbattuto in un bellissimo plugin di jQuery – realizzato da Luca Manno – che consente di realizzare un suggestivo effetto flip animato su qualsiasi elemento della pagina web.
Il plugin di cui vi parlo si chiama Flip! e può essere scaricato a questa pagina.
L’utilizzo del plugin è semplicissimo: si include il file .js subito dopo la libreria jQuery, dopodichè sarà sufficiente richiamare il metodo flip() associato al selettore dell’elemento sul quale si desidera applicare l’effetto:

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

Il metodo flip() supporta diverse opzioni; la più importante di queste è certamente direction la quale può avere quattro valori:

  • ‘tb’ => top-bottom
  • ‘bt’ => bottom-top
  • ‘lr’ => left-right
  • ‘rl’ => right-left

Oltre a questa, le opzioni disponibili consentono di cambiare il contenuto dell’elemento (content) ed il colore dello sfondo (color) al termine dell’animazione, della quale è anche possibile determinare la velocità (speed).
Oltre cal metodo flip() questo plugin introduce anche il metodo revertFlip() il quale riporta l’elemento al suo aspetto originale.

Per una documentazione esaustiva si faccia riferimento alla pagina ufficiale del progetto.

Post correlati
I più letti del mese
Tematiche