Créer des animations avec animate et wow !

Comment rapidement créer des animations avec animate.css et wow.js

La bibliothèque d’effet animate.css est idéale pour agrémenter son site d’effets visuels sympa. L’inconvénient et que les effets ont lieu au chargement de la page. Si vous mettez par exemple des effets à des éléments situés en dessous de la ligne de flottaison, en gros ils ne serviront à rien. On doit donc se débrouiller pour faire apparaître ces effets au scroll, au fur et à mesure qu’on descend dans la page.

Première étape :

On télécharger animate.css et wow.js.  On les place respectivement dans un dossier css et js à l’intérieur de notre thème.

On les inclut dans notre thème wordpress via l’appel au scripts dans le fichier functions.php.

function cc_scripts() {
 wp_enqueue_style('animate', get_template_directory_uri() . '/css/animate.css');

 wp_enqueue_script( 'wow', get_template_directory_uri() . '/js/wow.js');


add_action( 'wp_enqueue_scripts', 'cc_scripts' );

Deuxième étape, activer le plugin

Une fois wow.js installé, on doit initier le plugin. Dans un fichier js à part, on insère le code suivant:

new WOW().init();

Troisième étape, l’application sur le site

On applique les classes « wow » et celle de l’animation souhaitée dans animate.css, directement dans notre code. Wow.js offre des options pour jouer sur le temps d’animation. Vous pourrez les retrouver dans la doc officielle.

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
                    </section>

Wow.js et le SEO

D’après certains utilisateurs, l’utilisation d’un plugin comme wow.js n’est pas vraiment optimal pour le SEO d’un site. Les éléments sont par défaut en visibility:hidden ou en display:none tant qu’on ne les atteint pas au scroll. Les robots ne peuvent donc pas scanner correctement la page et cela joue naturellement sur le ranking de votre site.

L’astuce consiste à tromper les robots en simulant le scroll au chargement. Cela n’enlève rien à l’effet visuel, mais en inspectant le code, on voit bien qu’il n’y a plus d’élément caché sur la page !

jQuery(document).ready(function () {



var scrolled = false;
jQuery(window).on('scroll', function() {
if (!scrolled) {
scrolled = true;
new WOW().init();
}
})
});