Wow.js, une librairie JS pour faire des animations au scroll
Wow.js est une bibliothèque JavaScript qui permet facilement de « révéler » sous forme d’animation des éléments HTML au fur et à mesure que l’on défile la page.
« Animations… animations everywhere ! »
Comparable à l’excellent ScrollReveal.js, Wow.js permet de faire apparaître des animations sur n’importe quel élément HTML : ces-derniers sont invisibles jusqu’à ce que l’utilisateur fasse défiler la page à leur niveau pour qu’ils apparaissent à l’écran.
La personnalisation est assez poussée, notamment grâce à l’utilisation de la feuille de style Animate.css et ses nombreux types d’animation (60+), ainsi que des paramètres data-* HTML5 pour contrôller la durée de l’animation, le retard avant le début de l’animation, la distance de scroll pour lancer l’animation ou encore le nombre de répétitions.
Les avantages ? Pas de jQuery, un script plus léger que les autres, une installation simple et un code rapide d’exécution. La liste complète des animations est à découvrir sur Animate.css.
Installation de la librairie
Pour mettre en place la librairie, vous pouvez vous référer à la documentation de Wow.js ou suivre les instructions suivantes. Il faut tout d’abord inclure la feuille de style Animate.css :
<link rel="stylesheet" href="css/animate.css">
Puis vous devez inclure la librairie Wow.js et lancer son exécution comme ceci :
<script src="js/wow.min.js"></script> <script> new WOW().init(); </script>
Et enfin on termine par appliquer la classe CSS wow sur les éléments que l’on souhaite révéler (une animation par défaut est prévue) :
<div class="wow">Content to Reveal Here</div>
Il ne vous reste plus qu’à venir choisir votre animation d’Animate.css et ajouter la classe CSS correspondante à l’élément HTML.
<div class="wow bounceInUp">Content to Reveal Here</div>
Requis : JavaScript
Compatibilité : Navigateurs supportant les animations CSS3
Démonstration : http://mynameismatthieu.com/WOW/index.html/
GitHub : https://github.com/matthieua/WOW
Licence : MIT