Posted By Franck Pertegas on 18 Juin 2015 in CSS, Javascript, Programmation | 2 comments

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.

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 :

[pastacode lang= »markup » manual= »%3Clink%20rel%3D%22stylesheet%22%20href%3D%22iconate.min.css%22%3E%0A%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22iconate.min.js%22%3E » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »markup » manual= »%3Ci%20id%3D%22icon%22%20class%3D%22fa%20fa-bars%20fa-lg%22%3E%3C%2Fi%3E » message= » » highlight= » » provider= »manual »/]

Puis le code javascript pour l’animer :

[pastacode lang= »javascript » manual= »var%20iconElement%20%3D%20document.getElementById(‘icon’)%3B%0Avar%20options%20%3D%20%7B%0Afrom%3A%20’fa-bars’%2C%0Ato%3A%20’fa-arrow-right’%2C%0Aanimation%3A%20’rubberBand’%0A%7D%3B%0Aiconate(iconElement%2C%20options)%3B » message= » » highlight= » » provider= »manual »/]

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 :

[pastacode lang= »javascript » manual= »%0ArollOutRight%0ArollOutLeft%0ArubberBand%0AzoomOut%0AzoomIn%0AfadeOut%0AfadeOutRight%0AfadeOutLeft%0AfadeOutTop%0AfadeOutBottom%0AhorizontalFlip%0AverticalFlip%0AbounceOutBottom%0AbounceOutTop%0AbounceOutLeft%0AbounceOutRight%0ArotateClockwise%0ArotateAntiClockwise%0Atada%0A » message= » » highlight= » » provider= »manual »/]

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

Bon code à tous 😉