Flip, un plugin jQuery pour retourner vos éléments HTML

25 avril 2011
•
JS / jQuery
•
0 commentaire

Flip est un plugin jQuery qui permet de retourner des éléments HTML selon les axes X ou Y. L’animation appelée « flip » s’effectue sur un bloc appelé « flip-box ». Différentes options existent pour paramétrer la vitesse de la transition, la couleur ou l’appel de fonctions.

Comment l’utiliser ?

On sélectionne la div « flip-box » sur laquelle on applique la fonction flip().

$("#flipbox").flip({
	direction:'tb',
	content:'this is my new content'
});

Les options

  • content : contenu de la « flip-box » (HTML, texte ou objet jQuery)
  • direction : sens du « flip » avec comme valeurs ‘tb’, ‘bt’, ‘lr’, ‘rl’ (par défault:’tb’)
  • color : couleur du background de la « flix-box »
  • speed : vitesse du « flip »
  • onBefore : fonction synchrone exécutée avant le « flip »
  • onAnimation : fonction synchrone exécutée à la moitié du « flip »
  • onEnd : fonction synchrone exécutée après le « flip »

À noter qu’il est nécessaire d’intégrer le plugin jQuery UI car Flip utilise UI Core et Effects Core. Côté compatibilité, Flip fonctionne avec les principaux navigateurs du marché : Firefox, Opera, Chrome, Safari, et Internet Explorer (6+).

Requis : jQuery + jQuery UI
Démonstration : http://lab.smashup.it/flip/
Licence : MIT/GPL

Commentaires