WOW.js et Animate.css fait du WOOW

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

Exemple complet

	
		
		Les animations en CSS
Je veux sauter de joie quand l’utilisateur me verra
</div> http://js/wow.min.js new Wow().init(); </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 
Je saute
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

      Je veux bouger un peu quand l'utilisateur me verra

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

POUR VOUS
Vérifier et valider les formulaires avec HTML5

Ajouter un commentaire