La librairie CSS d’animation animate.css est une excellente solution quant aux animations courantes. Tout un tas d’animations prédéfinies existent mais le problème avec est que les animations avec cette librairie sont un peu incontrôlable.

Généralement, on peut avoir besoin d’exécuter une animation selon une condition donnée. Par exemple, lors d’un clic, d’un scrolling, etc… Découvrons WOW.js, une librairie JQuery qui en mélangeant avec animate.css, déclenche les animations au scroll de la page.

WOW.Js est une librairie JavasScript qui permet de déclencher les animations lors d’un scroll. L’animation est lancée seulement après que l’élément HTML apparaisse à l’écran, et avec l’avantage que tout cela soit configurable. Il est par défaut configurer pour être utilisé avec animate.css, mais vous pouvez utiliser une autre librairie d’animation qu’animate.css.

Installation

  1. Télécharger animate.css
  2. Télécharger WOW.js
  3. Incluez animate.css dans l’entête du document
    <head>
      <!-- ... -->
      <link rel="stylesheet" href="enmplacement-de/animate.min.css">
      <!-- ... -->
    </head>
  4. Incluez WOW.js (avant la fermeture de la balise body est l’une de meilleurs habitudes)
    http://emplacement-de/wow.min.js
    

Utilisation

Quelques classes suffisent pour animer un élément quand il se voie à l’écran

Je veux sauter de joie quand l’utilisateur me verra
    • wow : Signale qu’il faut animer cet élément lors d’un scroll

Exemple complet

	
<DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Wow.js</title>
  <link rel="stylesheet" href="css/animate.min.css" />
</head>
<body>
  <div class="wow bounce">Je veux sauter de joie quand l’utilisateur me verra</div>
  
  script src="js/wow.min.js"></script>
  <script>
    new Wow().init();
  </script> 
</body> 
</html>

Configuration de WOW.js

WOW.js comme dit dans le début est entièrement configurable. Voyons en détail quelques configurations essentielles.

new WOW({
  boxClass: 'bouger', // On aura maintenant à utiliser
  mobile: false, // Cela fera à ce que les animations ne se fassent pas depuis les terminaux mobiles 
  offset : 0 //La distance entre le bas de la page et l’élément avant le lancement de l’animation 
}).init();

Et puis il y a les attributs data-wow-* qui permettent de configurer aux plus fines les détails des animations de chaque animation.

  • data-wow-duration : La durée de l’animation. L’équivalent de animation-duration en CSS
  • data-wow-iteration : Le nombre de fois que l’animation va se répéter. L’équivalent de animation-iteration-count en CSS
  • data-wow-offset : La distance entre le bas de la page et l’élément lui seul, avant le lancement de l’animation.
  • data-wow-delay : Le temps avant que l’animation soit lancée. L’équivalent de animation-delay en CSS

Exemple

<div class= »bouger tada » data-wow-duration= »3s » data-wow-iteration= »infinite » data-wow-delay= »2s » data-wow-offset= »20″>Je veux bouger un peu quand l’utilisateur me verra</div>

Pour plus d’informations, allez sur WOW.JS , Animate.css et dans l’utilisation de Animate.css

 

 

Étiqueté dans :

, ,