Transformez vos icônes avec des animations en javascript et css3 avec iconate.js

iconate.js est une petite librairie javascript et CSS3 qui va vous permettre de transformer vos icônes (au clic par exemple) avec une animation de transition fluide et choisie.

Vous avez directement accès à une démo sur ce lien, comme ça vous voyez de suite de quoi il s’agit.

iconate-js-javascript-css3

Sa mise en place et son utilisation sont simples.

Tout d’abord, il faut télécharger les fichiers iconate.js.

Ensuite inclure dans votre HTML, la feuille de style et la librairie js :

<link rel="stylesheet" href="iconate.min.css">
    <script type="text/javascript" src="iconate.min.js">

Créer votre élément d’icône dans votre page :

<i id="icon" class="fa fa-bars fa-lg"></i>

Puis le code javascript pour l’animer :

var iconElement = document.getElementById('icon');
var options = {
from: 'fa-bars',
to: 'fa-arrow-right',
animation: 'rubberBand'
};
iconate(iconElement, options);

 

En l’occurrence, là, au clic, on souhaite que l’icône « fa-bars » devienne « fa-arrow-right » en utilisant la transition « rubberBand« .

Toutes les transitions possibles sont :


rollOutRight
rollOutLeft
rubberBand
zoomOut
zoomIn
fadeOut
fadeOutRight
fadeOutLeft
fadeOutTop
fadeOutBottom
horizontalFlip
verticalFlip
bounceOutBottom
bounceOutTop
bounceOutLeft
bounceOutRight
rotateClockwise
rotateAntiClockwise
tada

Librairie javascript sous MIT-License, que vous pouvez visualiser ici : https://github.com/bitshadow/iconate

Bon code à tous 😉

Author: Franck Pertegas

Share This Post On

2 Comments

Submit a Comment

Votre adresse e-mail ne sera pas publiée.