DEV Community

Ludo Loops
Ludo Loops

Posted on

Animation avec Scroll-out

Bonjour, je vais vous présenter la librairie JS: scroll-out permettant de faire des animations simples au défilement d'une page.
Démo

Préparation

Je commence par un boilerplate en HTML

Tips: dans vscode il suffit de taper ! dans un fichier HTML pour le créer

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
Enter fullscreen mode Exit fullscreen mode

ensuite, je crée mon fichier CSS, qui est dans mon cas est : css/main.css

je le relie à mon fichier HTML en rajoutant la ligne :
<link rel="stylesheet" href="css/main.css" />

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body></body>
</html>
Enter fullscreen mode Exit fullscreen mode

pour vérifier que mon CSS est bien attaché, je mets une couleur de fond pour le body

body {
  background-color: aqua;
}
Enter fullscreen mode Exit fullscreen mode

Puis je lance mon live server , extention vscode LiveServer

Et je vois une page turquoise, donc tout est bon :)

Je retourne dans mon HTML, je vais faire 4 <sections>, avec 1 titre <h1> et un paragraphe <p> dans chaque.

tips avec emmet on peut taper directement :
section*4>h1{titre$}+p>lorem

et je rajoute la balise data-scroll dans un h1 et une section .
Ensuite, je rajoute le lien vers la librairie scroll-out
Mon HTML ressemble à ça :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <section>
      <h1>titre1</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
        explicabo, dolorem laborum dicta exercitationem earum! Illum vitae
        saepe, ut praesentium beatae ipsa excepturi non commodi voluptatem
        tempora. Sit, placeat impedit!
      </p>
    </section>

    <section>
      <h1 data-scroll>titre2</h1>
      <p>
        Blanditiis minima iure molestias quis praesentium voluptatibus, deserunt
        repellendus necessitatibus qui, illum dolor, ipsum ipsam architecto?
        Illum consequatur aliquam rerum in qui. Quis, eligendi architecto.
        Ducimus quod magnam eveniet harum?
      </p>
    </section>

    <section data-scroll>
      <h1>titre3</h1>
      <p>
        Nemo corporis nesciunt quidem obcaecati dicta voluptas, deserunt ipsa.
        Pariatur neque vel tenetur quidem, commodi necessitatibus quae
        blanditiis harum nemo sunt nostrum quas esse officiis debitis! Molestias
        sunt minima quis.
      </p>
    </section>

    <section>
      <h1>titre4</h1>
      <p>
        Fuga qui, assumenda aut recusandae expedita, facere sit inventore
        voluptates nobis, exercitationem tenetur amet. Illum adipisci, tempora
        maiores velit magnam, praesentium earum aliquam possimus in debitis
        sapiente? Sapiente, ab aliquid.
      </p>
    </section>
  </body>
  <script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>

</html>
Enter fullscreen mode Exit fullscreen mode

Pour finir avec la préparation, je passe au CSS, pour mieux séparer les éléments et rendre une meilleure visibilité. Chaque section aura la hauteur d'un écran.

body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat';
}

section {
  height: 100vh;
  width: 100%;
  padding: 6em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: white;
}

section h1 {
  font-size: 5em;
}

section p {
  width: 50%;
  opacity: 0.8;
  line-height: 1.5em;
  font-size: 1.5em;
}

section:nth-of-type(1) {
  background: #1da767;
}

section:nth-of-type(2) {
  background: #257bb4;
}

section:nth-of-type(3) {
  background: #6f26b3;
}

section:nth-of-type(4) {
  background: #8ead27;
}
Enter fullscreen mode Exit fullscreen mode

Configuration

Pour continuer, je vais configurer les animations,

je vais faire une transition sur toute les balise data-scroll aillant une durée de 2 s


[data-scroll] {
  -webkit-transition: all 2s;
  transition: all 2s;
}
Enter fullscreen mode Exit fullscreen mode

Leout : l'élément n'est pas encore affiché sur l'écran.
Du coup, c'est le point de départ de l'animation.
Il est à 200px sur la gauche, avec une opacité à 0, donc transparent.

[data-scroll='out'] {
  opacity: 0;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
}
Enter fullscreen mode Exit fullscreen mode

La configuration de mon in, c’est-à-dire quand l'élément entre dans l'écran, il passe de la gauche, pour aller vers sa positon "normal", son opacité devient visible, le tout sur une durée de 2 seconde (qui a été définie avant).

[data-scroll='in'] {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
Enter fullscreen mode Exit fullscreen mode

Le fonctionnement de base est maintenant fait. Mais il y a un léger souci, puis que l'animation commence un peu trop tôt.
En effet, elle débute dès que l'écran l'affiche.

scrool_no_threshold.gif

je vais rajouter un délai, dans mon HTML, pour que l'animation commence 0.5 seconde plus tard avec threshold: 0.5

Et si je désire ne faire l'effet qu'une seule fois, je rajoute once: true

  <script>
    ScrollOut({
      once: true,
      threshold: 0.5,
    })
  </script>
Enter fullscreen mode Exit fullscreen mode

il existe plusieurs options disponibles, je vous renvoie vers la doc pour plus d'information : https://scroll-out.github.io/guide.html#configuration

Merci de m'avoir lu et bon code :)

code complet sur mon GitHub :
https://github.com/neuroloops/scroll-out

Top comments (0)