Animer ses titres avec scrollReveal

Ideal pour un site onepage où plusieurs sections se succèdent avec chacune des gros titres ,des sous-titres ou des images à la une, le plugin scrollReveal.js permet de faire apparaitre ses titres , div ou autre élément avec des effets multiples (de gauche à droite, bas en haut etc..).Comme son nom l’indique, l’animation s’execute au scroll sur la section concernée.

La particularité de ce petit plugin est qu’on utilise un langage courant pour définir ses animations.

On peut trouver une liste des mots clés à utiliser ici

update: le plugin subit des mises à jour qu’il faut suivre pour l’implémenter correctement sur son site.Voir le GitHub ici.

On télécharge le fichier js et on l’appelle dans son projet:

<!DOCTYPE html>
<html>
  <body>

    <!-- All your stuff up here... -->

    <script src='/js/scrollReveal.min.js'></script>
    <script>

      window.sr = new scrollReveal();

    </script>
  </body>
</html>

Ou si c’est un wordpress, dans son fichier functions.php et dans une fonction d’appel aux scripts, on ajoute notre fichier:

 wp_register_script('scrollReveal', get_template_directory_uri() . '/js/scrollReveal.js',array('jquery'),true);
wp_enqueue_script('scrollReveal');

Dans un fichier js à part, on initialise notre plugin:

 <script>

      window.sr = new scrollReveal();

    </script>

ou si c’est un wordpress

jQuery( document ).ready( function(  ) {
 window.sr = new scrollReveal();
});

On n’oubile pas non plus bien sur d’appeler ce dernier fichier via functions.php

Et voici un exemple de mise en page html ou deux éléments possèdent un attribut data-sr

<div class="title gradient"> 
        <div class="inner-section">
        <h3 class="site-title" data-sr="enter left and move 50px over 1.33s"><a href="<?php bloginfo('url'); ?>/category/videos" title="" rel="">Virtual Trip Videos</a></h3>
        <a data-sr="enter right and move 50px over 1.33s" class="call" href="<?php bloginfo('url'); ?>/category/videos" title="" rel="">Accéder aux Videos</a>
   
        
        </div>
      </div>

On peut retrouver les différentes valeurs ici pour tous les effets possibles:

31/05/2015 Mis à jour le 10/01/2017 Par Copier coller | Dans jQuery