Pour donner un peu de vie à un site, on peut souhaiter que certains éléments soient animés. Ils peuvent par exemple arriver lorsqu’on déroule l’écran jusqu’à leur position, ou s’animer lorsqu’on fait glisser la souris dessus. La solution, très simple, a été créée par Matthieu Aussaguel pour wow.js et Daniel Eden pour animate.css. On peut voir sur cette page de démonstration ce qu’il est possible de faire.
La situation initiale
J’ai un thème WordPress (avec son thème enfant que je peux modifier), mon site est déjà construit. Je veux maintenant ajouter des animations :
- quelques animations spécifiques sur la page d’accueil (codée en php) ;
- des animations systématiques pour des éléments tels que images, ou notes.
La solution
Plutôt que de modifier un thème enfant de mon thème, je crée un plugin de fonctionnalité (pour plus de précisions, voir la série d’articles « créer un plugin de fonctionnalités »).
L’extension complète et fonctionnelle est disponible ici, sur github. Elle utilise animation.css (à prendre ici) et wow.js (disponible ici).
Le principe :
Le fichier principal de l’extension (ald-animate.php) appelle ald-animate-enqueues.php et ald-wow-init.php.
ald-animate-enqueues.php sert, comme son nom l’indique, à charger la feuille de style animate.css et le script Javascript wow.js.
ald-wow-init.php génère le démarrage de l’ensemble (hook vers wp_head).
Utilisation de l’extension
Installer l’extension et l’activer
Ca n’a rigoureusement aucun effet à ce stade. Pour voir une animation, il faut :
- lorsqu’on écrit en HTML (par exemple en mode texte de l’éditeur WordPress, ou si on code « en dur » un template de page) : affecter une classe wow et une classe correspondant à l’animation choisie à l’objet sélectionné ;
- Sinon, modifier la feuille de style et y intégrer les paramètres d’animation.
- On peut également utiliser jquery pour ajouter une classe à un objet.
Cas 1 : ajouter des classes en HTML
Par exemple :
<div class="service wow bounceIn animated" data-wow-delay="0.8s">
<i class="fa fa-lightbulb-o"></i>
<h3>Avec qui ?</h3>
<p>Je travaille avec des dirigeants et leurs équipes qui veulent plus de performance, de rentabilité et de sérénité. .</p>
</div><!--service-->
ce div aura comme classe « wow bounceIn animated », ce qui signifie qu’il aura l’animation bounceIn. Le délai de 0.8s indique que l’animation ne doit se déclencher que 0.8 secondes après que l’internaute soit arrivé sur cette zone de l’écran.
Et voilà le résultat en gif (gif créé à partir du programme gratuit Gyazo) :
Normalement l’animation ne se produit qu’une fois, à partir du cadre vide. C’est ma capture qui n’est pas très bien faite…
Cas 2 : ajouter l’animation en css
Supposons que je veuille qu’une image sur laquelle je place ma souris bouge. Dans style.css, j’ajoute les éléments suivants :
a:hover img {
-webkit-animation: tada 1s;
animation: tada 1s;
-moz-animation: tada 1s;
-o-animation: tada 1s;
}
Et mon image s’anime lorsque ma souris passe dessus !
Cas 3 : utiliser jquery
Avec jquery, on peut ajouter des classes à des éléments spécifiés. Par exemple, si je voulais ajouter une classe « wow bounceIn animated » à tous les éléments de classe « service », je mettrais le code suivant dans functions.php de mon thème enfant :
<?php
/* add a class to all elements with "service" class */
add_action( 'wp_head', 'ald_add_class_to_element_with_nested_img' );
function ald_add_class_to_element_with_nested_img() {
?>
<script>
jQuery(document).ready(function() {
jQuery("service").addClass("wow bounceIn animated");
});
</script>
<?php
}
?>
Je n’ai pas testé exactement cette fonction. Mais dans cet article, ici, j’ai testé une autre fonction semblable.
Pour plus d’informations
Une documentation sur wow.js est disponible ici, en anglais. Sur animate.css, on peut lire la documentation ici ou regarder l’effet de chaque animation sur cette page.
