Wow.js et animate.css : Afficher et animer les éléments au niveau de la scroll bar

Mis à jour il y a 3 ans

Un tutoriel pour afficher sur une page web les éléments qui se trouvent au niveau de la barre de défilement (scroll bar) avec wow.js en les animant avec animate.css

Commenter

Offrir un café

Auteur

Wilo A.

Domaine

Développement web

Technologies

HTML, CSS, JavaScript

Sommaire

Introduction
Télécharger et importer wow.js et animate.css
Animer un élément avec animate.css
Révéler un élément avec wow.js

Voir aussi Un tutoriel pour mettre en place un formulaire de contact pour envoyer un mail dans un projet Laravel Livewire. En savoir plus

Introduction

Wow.js est une libraire Javascript qui permet de suivre le niveau de la barre de défilement (Scroll bar) du navigateur pour afficher les éléments d'une page web suivant ce niveau ou dans la zone d'affichage (viewport).

Animate.css est une librairie CSS qui permet d'animer les éléments d'une page web à partir des classes CSS liées aux animations.

Nous allons voir dans ce guide comment télécharger les librairies wow.js et animate.css, les importer dans une page HTML pour afficher en animant les éléments de cette dernière par rapport au niveau de la barre de défilement ou dans la zone d'affichage.

Télécharger et importer wow.js et animate.css

Les librairies wow.js et animate.css sont accessibles depuis les adresses suivantes :

animate.css : http://daneden.github.io/animate.css/
wow.js : https://wowjs.uk

Pour les importer dans une page HTML, nous avons le choix soit d'utiliser les liens CDN de la manière suivante :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>WOW.js et Animate.css</title>
	<!-- Importation CDN animate.min.css -->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
	<!-- Importation CDN wow.min.js -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" ></script>
</body>
</html>

Ou les télécharger via npm en exécutant la commande suivante :

npm install wow.js animate.css --save

Puis les importer dans une page HTML depuis le dossier /node_modules :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>WOW.js et Animate.css</title>
	<!-- Importation animate.min.css -->
	<link rel="stylesheet" type="text/css" href="./node_modules/animate.css/animate.min.css">
</head>
<body>
	<!-- Importation wow.min.js -->
	<script type="text/javascript" src="./node_modules/wow.js/dist/wow.min.js" ></script>
</body>
</html>

Animer un élément avec animate.css

Animate.css présente des nombreux styles d'animation que nous pouvons trouver à l'adresse https://animate.style : « bounce, « fadeIn », « flash », « swing », « flipInX », « slideDown », zoomInDown », ...

Pour animer un élement d'une page web (titre <h1>, image <img>, paragraphe <p>, ...), on lui ajouter la classe « animate__animated animate__ » suivi du nom de l'animation.

Exemple

<!-- animation "zoomInDown" -->
<h1 class="animate__animated animate__zoomInDown" >WOW.js et Animate.css</h1>

<!-- animation "fadeInDown" -->
<p class="animate__animated animate__fadeInDown" >Lorem ipsum dolor sit amet, ...</p>

<!-- animation "slideInUp" -->
<img src="https://picsum.photos/300" alt="" class="animate__animated animate__slideInUp" >

Révéler un élément avec wow.js

Aussitôt qu'une page HTML est chargée dans le navigateur, ses éléments s'affichent avec les animations d'animate.css. En défilant vers le bas de la page, les autres éléments en dehors de la viewport se présentent sans animation bien qu'ils aient la classe « animate__animated animate__... ».

Pour contourner ce problème, wow.js masque les éléments de la page qui sont en dehors de la zone d'affichage pour les afficher dès qu'ils se trouvent à un certain niveau de la barre de défilement ou dans la viewport.

Comme nous avions déjà importé wow.js, nous pouvons l'initialiser via le code JavaScript ci-dessous :

<!-- Importation wow.min.js -->
<script type="text/javascript" src="./node_modules/wow.js/dist/wow.min.js" ></script>
<!-- // Initialisation wow.js -->
<script type="text/javascript">
	new WOW().init()
</script>

Nous pouvons à présent ajouter la classe CSS « wow » aux élements à révéler par rapport au niveau de la scroll bar ou dans la viewport. Complétons l'exemple précédent :

<!-- "wow" avec animation "zoomInDown" -->
<h1 class="wow animate__animated animate__zoomInDown" >WOW.js et Animate.css</h1>

<!-- "wow" avec animation "fadeInDown" -->
<p class="wow animate__animated animate__fadeInDown" >Lorem ipsum dolor sit amet, ...</p>

<!-- "wow" avec animation "slideInUp" -->
<img src="https://picsum.photos/300" alt="" class="wow animate__animated animate__slideInUp" >

Attributs HTML de wow.js

Wow.js présente des attributs (options) pour determiner les comportements des éléments d'une page HTML lorsqu'ils s'affichent :

data-wow-duration : la duree de l'animation ("1s" pour une seconde, "100ms" pour 100 millisecondes)
data-wow-delay : Le delai avant que l'animation commence ("2s" pour deux secondes, "200ms" pour 200 milli-seconde)
data-wow-offset : La distance (100, 250, ...) où commencer l'animation d'un élément par rapport au bas du navigteur.
data-wow-iteration : Le nombre de fois que l'animation doit se repéter ("2" pour deux fois, "3" pour trois fois, ...).

Attribuons ces options à nos elements :

<!-- "wow" +  animation "fadeInDown" + "data-wow-duration" + "data-wow-iteration" -->
<h1 class="wow animate__animated animate__bounceIn" data-wow-duration="1s" data-wow-iteration="3" >WOW.js et Animate.css</h1>

<!-- "wow" + animation "fadeInDown" + "data-wow-offset" + "data-wow-delay" -->
<p class="wow animate__animated animate__fadeInDown"  data-wow-offset="150" data-wow-delay="500ms" >Lorem ipsum ...</p>

Personnaliser wow.js

Nous pouvons paramétrer wow.js lors de l'initialisation en lui transmettant un objet avec les propriétés suivantes :

new WOW({
   boxClass: 'wow', // par défaut
   animateClass: 'animated', // par défaut
   offset: 0, // par défaut
   mobile: true, // par défaut
   live: true // par défaut
}).init();

Nous avons :

boxClass : Le nom de la classe qui affiche un élément masqué par rapport au niveau de la barre de défilement ou dans la zone d'affichage.
animateClass : Le nom de la classe CSS qui déclenche les animations ("animated" par defaut pour l'ancienne version d'animate.css)
offset : La distance où afficher un élément par rapport au bas du navigateur.
mobile : Active/désactiver wow.js sur les appareils mobiles.
live : Checker constamment les nouveaux éléments de classe "wow" dans page.

Portez-vous bien !

#html #css #javascript

Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.

Wilo Ahadi, l'auteur

Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School

Voir profil