wow.js, démarrer des animations au scroll

Elliott Chiaradia | 21-02-2016

À la démocratisation des sites « one page », les animations démarrant aux scrolls sont devenues populaires. Wow.js répond convenablement à ces attentes.

Avec wow.js, vous pouvez très bien utiliser des effets customs mais il faut savoir que la librairie Animate.css offre une jolie palette d’animations CSS prêtes à l’emploi. Vous pouvez les tester directement via le site de la librairie.

 

Un peu de pratique

Nous allons utiliser Animate.css, je vous invite à télécharger la feuille de style disponible ici. La liste complète des animations peut être, quant à elle, visionnée dans leur github.

Maintenant que vous avez acquis le fichier animate.css, vous devez vous procurer le script wow.js. Pour cela, rendez-vous directement dans le github de wow.js. Vous pouvez télécharger soit la version standard, soit la version minifiée, à vous de choisir.

Passons maintenant au code, voici la structure de base que je vous propose :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <link rel="stylesheet" href="css/animate.css">
  </head>
  <body>
    <div class="wow bounceIn">
      <img src="img/oculus.jpg"/><br>
    </div>
    <script src="js/jquery-2.2.0.min.js"></script>
    <script src="js/wow.js"></script>
    <script>
      $(document).ready(function(){
        new WOW().init();
      });
    </script>
  </body>
</html>

 

Analysons brièvement le code. Nous avons une image « oculus.jpg » que nous animons (à l’aide de l’effet : « bounceIn », choisi parmi la liste des animations d’animation.css) quand l’utilisateur arrive à son niveau. Pour que cela fonctionne, nous avons dû charger la feuille css animate.css dans le head, ajouter la classe « wow » ainsi que la classe de notre animation « bouceln » à la div contenant notre image et finalement, nous avons chargé Jquery (qu’on utilise pour sa fonctionnalité document ready), le script wow.js et un petit script d’initialisation de wow.

Wow.js permet de configurer les animations très simplement. Si nous voulons modifier la durée de notre animation, nous pouvons utiliser la data « data-wow-duration » comme ceci :

<div class="wow bounceIn" data-wow-duration="1.4s" >
  <img src="img/oculus.jpg"/><br>
</div>

 

Si nous voulons que notre animation ne démarre qu’après un certain temps (en seconde), nous utiliserions « data-wow-delay ».

<div class="wow bounceIn" data-wow-delay="1s">
  <img src="img/oculus.jpg"/><br>
</div>

 

Grâce à l’option « data-wow-iteration », vous pouvez répéter l’animation autant de fois que vous le voulez. Par exemple, data-wow-iteration="2" va lancer l’animation deux fois de suite.  Si vous désirez que celle-ci boucle indéfiniment, vous devez utiliser la valeur « infinite » .

<div class="wow bounceIn" data-wow-iteration="infinite" >
   <img src="img/oculus.jpg"/><br>
</div>

 

Les animations se déclenchent quand l’utilisateur est au niveau de l’objet que nous voulons animer, cependant, il peut arriver qu’on veuille ajuster la position verticale à laquelle l’animation démarre, l’option « data-wow-offset » a été créée à cet effet.

<div class="wow bounceIn" data-wow-offset="200">
  <img src="img/oculus.jpg"/><br>
</div>

 

A l’initialisation de wow, on peut aussi y définir des options. On peut par exemple configurer l’offset présenté précédemment directement à la source, ce qui aura pour effet de définir l’offset pour toutes les balises ayant comme classe « wow ».

<script>
  $(document).ready(function(){
    wow = new WOW(
    {
      offset: 200               
    })
    wow.init();
  });
</script>

 

Durant l’initialisation, on peut bien entendu configurer d’autres choses. La boxClass permet de choisir à partir de quelle classe le démarrage de l’animation va se faire, par défaut elle contient « wow ». L’animateClass définit quelle classe est animée, on peut imaginer qu’à la position du scroll sur une div, on anime qu’un seul de ses enfants, il devra donc avoir comme nom de classe l’animateClass. Et finalement, la propriété « mobile » permet de déclencher ou non les animations pour les petites résolutions.

<script>
  $(document).ready(function(){
    wow = new WOW(
    {
      boxClass:     'wow',      
      animateClass: 'animated',         
      mobile:       false           
     })
     wow.init();
  });
</script>

 

Bien entendu, vous pouvez très bien utiliser Animate.css sans wow.js

<div class="bounceIn animated">
  <img src="img/oculus.jpg"/><br>
</div>

 

Conclusion

Wow.js couplé à animate.css permet de personnaliser très simplement, mais efficacement les « one page ». Les options offertes par wow.js ne sont pas très nombreuses, mais elles permettent sans doute de couvrir la plupart de vos besoins sans devoir rajouter du code custom. Cependant, si vous trouvez une animation d’animate.css chouette, mais que vous n’avez pas envie d’intégrer wow.js, vous pouvez bien évidemment quand même l’utiliser, à savoir qu’elle se lancera dès le chargement de la page, ça sera donc à vous de la configurer manuellement, si vous voulez qu’elle démarre à un moment X ou Y.

Sources :

Démonstrations des animations de animate.css : https://daneden.github.io/animate.css/

Animate.css Github : https://github.com/daneden/animate.css

Wow.js documentation : http://mynameismatthieu.com/WOW/docs.html

Wow.js Github : https://github.com/matthieua/WOW