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 😉
19 juin 2015
Sympa cette librairie d’icones! on peut les changer à volonté ? si oui, c’est la même procédure?
19 juin 2015
Bonjour,
oui, c’est possible, par défaut, on utilise Font Awesome (http://fortawesome.github.io/Font-Awesome), mais on peut utiliser Glyphicons (http://glyphicons.bootstrapcheatsheets.com) ou nos propres icônes.
La procédure est la même oui 😉