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
    <script src="emplacement-de/wow.min.js" charset="utf-8">
  5. Instancier WOW.js (après avoir inclus WOW.js
    <script>
        new Wow().init()
    </script>
    

Utilisation

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

<div class="wow bounce">
	Je veux sauter de joie quand l’utilisateur me verra
</div
  • wow : Signale qu’il faut animer cet élément lors d’un scroll
  • bounce : Le nom de l’animation (toutes les animations ici)

Exemple complet

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Les animations en CSS</title>
		<link rel="stylesheet" href="css/animate.min.js">
	</head>
	<body>
		<div class="container">
			<div class="wow bounce">
				Je veux sauter de joie quand l’utilisateur me verra
			</div>
		</div>
		<script type="text/javascript" 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 <div class= « bouger bounce »>Je saute</div>
  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

Ajouter un commentaire