Warning: Use of undefined constant uniqid - assumed 'uniqid' (this will throw an Error in a future version of PHP) in /homepages/43/d521926771/htdocs/epcwbsite/wp-content/plugins/epica-official-sc/core/shortcodes.php on line 3
Animer vos éléments HTML avec WOW.js | epica design
Se connecter Recherche

Comparable à l’excellent ScrollReveal.js détaillé dans un article précédent, Wow.js permet de faire apparaître, avec une animation, un élément HTML dans votre contenu de page: ces-derniers restent invisibles jusqu’à ce que l’utilisateur fasse défiler la page à leur niveau, c’est alors que la « magie » entre en jeu et les fait apparaître à l’écran. Pour les amateurs de démo en live, c’est par ici.

epica design

Les prérequis

Wow.js est une bibliothèque JavaScript fonctionnant de manière autonome, j’entend par là que vous n’avez pas obligation d’utiliser jQuery dans votre page.
Autonome! pas tout à fait! Le script traite des informations précisées à coup de class css et se personnaliser avec des attributs data ajoutés à vos éléments HTML et leur ajoute une class (animated par défaut) lorsque ceux-ci se situe dans le champ de scroll. C’est l’ajout de cette class animated qui va engendrer l’animation. Mais à ce stade, il vous manque les animations! Pour compléter ce vide, wow.js est conçu de façon à être couplé avec la feuille de style Animate.css et ses nombreux types d’animation (60+) dont vous pouvez tester les animations en vous rendant sur cette page. A ce jour, c’est le meilleur fichier d’animations CSS3 que je connaisse mais si vous en connaissez un autre, n’hésitez pas à m’en faire part.

Voici les liens vous permettant de récupérer l’ensemble des fichiers sources pour l’utilisation de wow.js

Installation de la librairie

Pour mettre en place la librairie, vous pouvez vous référer à la documentation officielle ou suivre celle indiquée sur cette page. Je ne vous le cache pas, ce sont les mêmes!

En premier point, vous devez appeler le fichier wow.js dans votre page HTML, juste avant le </body>

<script src="js/wow.min.js"></script>

Puis procéder à l’exécution de la librairie

<script src="js/wow.min.js"></script>
<script>
 new WOW().init();
</script>

Dans le <head> de votre page, appeler le fichier Animate.css afin de pouvoir utiliser les animations CSS3

<link rel="stylesheet" href="css/animate.css">

Animer des éléments HTML

Comme cité, les animations vont s’assigner avec les class css correspondantes, définies par le fichier animate.css. Mais pour que wow.js les détecte, chaque élément comportant une animation devra aussi se voir attribué la class wow.

<h1 class="wow bounceInRight">Mon élément HTML animé</h1>

Et oui, c’est aussi simple que ça! Vous pouvez bien sur ajouter différentes class afin de définir des styles à vos éléments comme vous le faites habituellement.

<h1 id="my_element" class="wow bounceInRight my_custom_class my_second_style">Mon élément HTML animé</h1>

Aller plus loin

wow.js aurais pu se limiter à cette intégration, mais le goût de « trop peu » aurais été amer. La force de cette librairie est aussi dans son champ de personnalisation dont elle vous laisse disposer. Vous pourrez ainsi, grâce au attribut data, adapter chaque animation à votre envie de rendu coté front-end.

Les attributs proposés:

data-wow-duration: défini le temps d’animation, en seconde ou millisecondes (ajoutez le s ou le ms)
data-wow-delay: défini le temps d’attente avant le déclenchement de l’animation, en seconde (ajoutez le s ou le ms)
data-wow-offset: défini une distance avant le lancement de l’animation. Distance en pixels calculée à partir du bottom de votre page (uniquement la valeur  numérique, sans px)
data-wow-iteration: Défini le nombre de fois ou l’animation est répétée. Saisissez uniquement une valeur numérique ou utilisez l’argument infinite pour une animation en boucle

Ce qui, coté code, vous donnera:

<h1 class="wow bounceInRight" data-wow-iteration="8">Mon élément HTML animé</h1>
 <h1 class="wow bounceInRight" data-wow-delay="2000ms">Mon élément HTML animé</h1>
 <h1 class="wow bounceInRight" data-wow-duration="4s">Mon élément HTML animé</h1>
 <h1 class="wow bounceInRight data-wow-offset="300">Mon élément HTML animé</h1>

Vous pouvez également additionner ces attributs:

<h1 class="wow bounceInRight" data-wow-iteration="8" data-wow-delay="2000ms" data-wow-duration="4s" data-wow-offset="300">Mon élément HTML animé</h1>

Modifier les valeurs par défaut de la librairie

Afin de ne pas réécrire des valeurs communes à vos animations ou si vous souhaitez définir des paramètres personnalisés, wow.js vous permet également de définir vos propres paramètres. Ces modifications sont à apporter lors du lancement d’exécution de la librairie.

<script src="wow.min.js"></script>
 <script>
 wow = new WOW(
 {
 boxClass: 'wow', // le nom de class permettant la détection des éléments animés
 animateClass: 'animated', // la class qui leur sera ajoutée pour déclencher l'animation. Doit être en rapport avec votre fichier css d'animations
 offset: 0 // la distance avant le lancement de l'animation. Distance en pixels calculée à partir du bottom de votre page
 }
 );
 wow.init();
 </script>

En bref: Pas de jQuery, un script léger, une installation rapide et un code simple et personnalisable; voilà de quoi dynamiser vos page web sans avoir à vous prendre la tête!


Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/43/d521926771/htdocs/epcwbsite/wp-includes/class-wp-comment-query.php on line 399

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

*