Wow.js, une librairie JS pour faire des animations au scroll

24 août 2014
•
HTML5 / CSS3, JS / jQuery
•
3 commentaires

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.

wow_js

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

Commentaires