Tel 
Une petite icône animée sur une page web peut parfois être intéressante à utiliser. Voici une ressource qui pourra plaire à certains.
Le projet Titanic est proposé par icons8, un site qui propose aujourd’hui 55,900 icônes en Flat Design gratuites.
Pour afficher une icône animée dans une page web, c’est relativement simple : faire appel à une librairie JavaScript, intégrer un code JavaScript dans sa page, spécifier quelle icône s’affichera via une classe et définir le déclencheur de l’animation (clic, survol de la souris…).
Exemple d’intégration…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<head> <!--Inserting the scripts once for the whole page--> <script src="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script> </head> <body> <!--Inserting an icon--> <div class='titanic titanic-checkbox'></div> <!--Initializing--> <script> var titanic = new Titanic({ hover: true, // auto animated on hover (default true) click: true // auto animated on click/tap (default false) }); </script> <!--Clicking turns this icon on--> <button onclick="titanic.on(getElementById('checkbox').value)">On</button> </body> |
Voir le projet Titanic sur Github pour plus d’infos.
