Flip, un plugin jQuery pour retourner vos éléments HTML
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