1. Présentation

Faire des animations en CSS3, c'est sympa. Mais disposer d'une bibliothèque javascript qui permet de les créer facilement, c'est encore mieux. Couleurs, rotations, opacité sont autant d'éléments gacilement modifiables grâce à Velocity.js . Mais rien de tel qu'un aperçu:

Bref, vous l'avez compris, Velocity permet de faire des choses très sympa.

Ce script est compatible avec JQuery mais peut être utilisé sans ce dernier. (Pour mémoire, l'utilisation de JQuery pose quelques problèmes sur Eklablog. Voir l'article sur le sujet).

2. Mise en place

Comme d'habitude, il faut charger un script.

Téléchargez le ici: Velocity.js

Enregistrez le parmi les fichiers de votre blog et récupérez son url.

Pour l'inclure sur votre blog, il vous suffit de placer cette ligne:

<script src="url de votre fichier"></script>

3. Utilisation

Voilà le script chargé. Maintenant il faut pouvoir s'en servir. Dans les exemples qui suivent, on va l'appliquer sur un élément qui a l'id "monelement"

On va cibler cet élément avec la commande $("monelement") qui est un raccourci mootools et qui correspond au code javascript suivant: document.getElementById("monelement")

Exemple 1 - Rotation selon X

Velocity($("monelement"),{rotateX: "60deg"},{duration:3000});

Dans cet exemple, on applique une rotation selon X de 60 degrés sur une durée de 3000 ms (3 secondes). Les fonctions rotateY et rotateZ sont également disponibles

Exemple 2 - Déplacement

Velocity($("monelement"),{left: 150, top:200},{duration:1000});

Ici on déplace l'élément (qui doit être en position:relative) de 150 px horizontalement et 200 px verticalement pendant 1 seconde

Exemple 3- Opacité

Velocity($("monelement"),{opacity:0},{duration:2500});

Ici on rend l'élément transparent en 2,5 secondes.

Exemple 4 - Combinaison

On peut combiner plusieurs propriétés dans la même transformation comme par exemple:

Velocity($("monelement"),{opacity:0, left:200, top:300, rotateX:"20deg"},{duration:2000});

Dans ce cas, toutes les transformations s'effectuent simultanément. Si l'on souhaite les appliquer les unes à la suite des autres, on lancera plusieures commandes:

Velocity($("monelement"),{opacity:0},{duration:500});
Velocity($("monelement"),{left:200},{duration:500});
Velocity($("monelement"),{top:300},{duration:500});
Velocity($("monelement"),{rotateX:"20deg"},{duration:500});

Exemple 5 - SVG

Velocity($("rect"),{delay:500});
Velocity($("rect"),{ x: "+=200", y: "25%" });
Velocity($("rect"),{ fillGreen: 255, strokeWidth: 10 });
Velocity($("rect"),{ height: 50, width: 50 });
Velocity($("rect"),{ rotateZ: 90, scaleX: 0.5 });
Velocity($("rect"),"reverse", { delay: 250 });

Velocity fonctionne aussi sur les graphismes SVG. Voir le site officiel pour plus d'informations.