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
<!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" />
<!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
body {
background-color: aqua;
}
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>
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;
}
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;
}
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);
}
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);
}
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.
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>
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)