Animation avec Scroll-out
Tags: css, javascript, french
Published: 2021-04-25 22:00:23

Bonjour, je vais vous présenter la librairie JS:  [scroll-out](https://scroll-out.github.io/) permettant de faire des  animations simples au défilement d'une page. 
 [Démo](https://neuroloops.github.io/scroll-out/) 


## 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1619262477291/acq6Vu1JU.png)



```html
<!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>
``` 
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" />`

```html
<!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>
```
pour vérifier que mon CSS est bien attaché, je mets une couleur de fond pour le body

```css
body {
  background-color: aqua;
}
``` 

Puis je lance mon `live server` , extention vscode  [LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.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 :
```html
<!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>
```

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.

```css
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;
}
```
## 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
```css

[data-scroll] {
  -webkit-transition: all 2s;
  transition: all 2s;
}
```
Le`out` : 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.

```css
[data-scroll='out'] {
  opacity: 0;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
}
```

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).

```css
[data-scroll='in'] {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
```



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](https://cdn.hashnode.com/res/hashnode/image/upload/v1619266979519/bd1Z7vP2Y.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`

```html
  <script>
    ScrollOut({
      once: true,
      threshold: 0.5,
    })
  </script>
```
il existe plusieurs options disponibles, je vous renvoie vers la doc pour plus d'information : [https://scroll-out.github.io/guide.html#configuration](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](https://github.com/neuroloops/scroll-out)