Circulate, des animations circulaires avec jQuery

11 février 2011
2 715 vues

Circulate est un plugin jQuery qui permet de créer une animation circulaire sur un élément HTML. Le plugin contrôle la trajectoire de l’animation et fait passer l’élément derrière d’autres éléments HTML pour créer un effet de profondeur.

Principe et utilisation

Pour utiliser Circulate, il faut commencer par inclure la bibliothèque jQuery. Il faut également installer le plugin jQuery Easing pour bénéficier des différentes fonctions « easing » qui rendent les animations plus dynamiques et donc plus réalistes. Sans ce plugin, Circulate ne peut fonctionner. Ensuite, on fait appel à la fonction circulate() sur l’élément HTML que l’on veut mettre en mouvement.

$("#anything").circulate({
    speed: 400,
    height: 200,
    width: 200,
    sizeAdjustment: 100,
    loop: false,   
    zIndexValues: [1, 1, 1, 1] 
});

Les principales options

Vous pouvez paramétrer quelques options de base comme la vitesse d’animation, la hauteur et la largeur de la rotation. Il en existe trois autres :

  • sizeAdjustment : valeur d’ajustement (%). Par défaut à 100%. Ce paramètre permet de changer la taille de l’élément HTML pour jouer sur l’effet de pronfondeur.
  • loop : animation en boucle (true ou false). Par défaut à false. Vous pouvez arrêter l’animation en appelant la fonction jQuery stop() sur l’élément HTML.
  • zIndexValue : tableau de quatre valeurs numériques qui définissent la propriété CSS z-index des quatre points de l’animation

Requis : jQuery + jQuery Easing
Démonstration : http://css-tricks.com/examples/Circulate/
Licence : libre

Commentaires

  • staacy_xoxo

    TJ2N Lately i was so very lacking in money and debits were killing me from everywhere. That was RIGHT UNTIL I decided to earn money.. on the internet! I visited surveymoneymaker d.o.t net, and started filling in surveys for money, and yes, I’ve been really more able to pay my bills! I’m very glad, I did this!!! – m0SR