Se connecter Recherche

epica design

Avec scrollReveal.js, vous pouvez créer simplement des éléments HTML animés qui en provenance des différents côtés de la page et qui se déplace selon une direction et des temps définis. Les animations que vous créez ne sont déclenchés lorsque l’utilisateur final défile sur la page Web.

Installer ScrollReveal.js

Pour installer scrollReveal.js, il vous suffit de le télécharger et de procéder à son intégration dans votre page web par une ligne de code d’appel de fichier JS.

<script type='text/javascript' src='mon_chemin_de_fichier/scrollReveal.min.js'></script>

N’oubliez pas de modifier mon_chemin_de_fichier par le chemin accédant à votre fichier.

Puis de lancer la fonction, toujours avant votre </body>, qui lancera les fonctions du plugin. ScrollReveal.js ne requiet pas la bibliothèque jQuery pour fonctionner.

<script>
window.scrollReveal = new scrollReveal();
</script>

Créer une animation sur un élément

L’utilisation de base se fait par l’ajout de l’attribut data-sr= » » sur l’élément choisi.

<h1 data-sr="">Vous utilisez Scroll Reveal sur cet élément</h1>

A ce niveau, votre élément sera révélé au scroll avec un animation basique, nous allons voir maintenant comment améliorer et personnaliser celle-ci.

Définir les animations avec les valeurs clefs

Pour ajuster les différents paramètres de votre animation, vous disposez de plusieurs propriétés que vous intégrerez dans l’attribut data-sr= » ». Leur conpréhension est très simple et je trouve ceci plutôt agréable.

La propriété enter

Celle-ci vous permet de définir la provenance de votre élément, au choix: top, left, bottom or right, et s’ajoute comme ceci:

<h1 data-sr="enter top">Vous utilisez Scroll Reveal sur cet élément</h1>

La propriété move

Celle-ci vous permet de définir la distance de mouvement de votre élément. Celle-ci se définie en pixels (px) et s’ajoute comme ceci:

<h1 data-sr="move 250px">Vous utilisez Scroll Reveal sur cet élément avec un move de 250px</h1>

La propriété over

Celle-ci vous permet de définir le temps durant lequel de mouvement de votre élément va s’effectuer. Pour faire simple, utiliser des secondes, les décimales étant acceptées.

<h1 data-sr="over 3s">Vous utilisez Scroll Reveal sur cet élément avec over de 3 secondes</h1>

La propriété wait

C’est le temps d’attente entre le moment ou l’élément est dans le champ de scroll et le moment où son animation commencera à s’effectuer, en seconde aussi.

<h1 data-sr="wait 3s">Vous utilisez Scroll Reveal sur cet élément une attente wait de 3 secondes</h1>

L'union fait la force

Vous pouvez créer des animations assez sympa en combinant les différents paramètres de celles-ci. En effet, Vous pouvez combiner des mots-clés et leurs valeurs en les séparant par une virgule, ou en utilisant des mots de séparation: from, the, and, then, but, with.

Un exemple de combinaison de mots clés et leurs valeurs devrait ressembler à ceci:

<!-- avec des virgules pour coder plus vite -->
<h1 data-sr="enter top, move 250px, over 1s, wait 3s">Cet élément est codé avec des virgules</h1>
<!-- avec des mots de séparation pour coder plus lisible -->
<h1 data-sr="enter top with move 250px and over 1s but wait 3s">Cet élément est codé avec des mots de séparation</h1>

Maintenir l'élément visible ou pas en dehors le scroll

ScrollReveal.js vous permet également, comme sur la démonstration officielle, de faire disparaître l’élément animé si celui-ci sort du champ de scroll; ce qui aura pour effet de relancer l’animation si le visiteur de votre site revient dessus. Pour ce faire, il faut influer sur les propriétés définies dans le lancement de fonction:

window.sr= new scrollReveal({
reset: true, // faire disparaitre l'élément en dehors du scroll. Par défaut false
});

Et le style dans tout ça

Chaque élément utilisant ScrollReveal.js peut se voir ajouter une multitude de class ou un id afin de vous permettre de lui créer un style CSS propre. J’ai utlisé une balise <h1> pour cet article mais une <div> ou <span> est entièrement compatible. Si vous souhaitez ajouter des class CSS, votre élément prendra alors cet écriture de code:

<h1 class="mon_style_css" data-sr="enter top, move 250px, over 1s, wait 3s">Cet élément est codé avec des virgules et a 
une class css</h1>

Demo et site officiel de scrollreveal.js


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

Commentaires Écrire un commentaire

  • Patrick Javelle le 19 octobre 2017 at 20 h 03 min Répondre

    ScrollReveal est un script très facile à mettre en place et à configurer. Il permet d’animer rapidement une page HTML. Personnellement, en tant webdesigner, je l’utilise régulièrement sur des projets professionnels. Scroll Magic est un script similaire, mais peut être un peu plus long à mettre en oeuvre.
    Merci pour l’article qui résume bien les forces et les avantages de ce script.

  • Sitolog le 12 novembre 2017 at 9 h 53 min Répondre

    Bonjour,

    Votre article est obsolète, vous devriez le retirer ou le mettre à jour.
    La version actuelle de ScrolReveal ne supporte plus le mode inline (data-sr= »… »). Il faut à présent obligatoirement passer par des classes.

    J’ai passé une heure à essayer de faire fonctionner le pluggin selon votre tuto (et d’autre tuto sur le net qui expliquent la même chose que vous) , avant de tomber sur cette info : https://github.com/jlmakes/scrollreveal/issues/205

    Crdlt
    Franck


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

*