I. Introduction
Dans ce tutoriel, vous allez découvrir comment animer un élément sur votre page Web lors du Scroll, et ceci très simplement grâce aux langages HTML, CSS et Javascript.
Ce tuto nécessite des connaissances basiques de l’HTML et du CSS.
Ces animations permettent de rendre le rendu visuel agréable et élégant à la fois. Vous expérimentez ces animations chaque jour lorsque vous êtes sur la toile ! (Apple en est l’exemple même.)
Pour ce tutoriel, l’utilisation de Visual Studio Code est recommandé.
Mise en place
Premièrement, ouvrer votre éditeur de code (ici, Visual Studio Code). Créer un fichier où se situera 3 fichiers, main.html, style.css et app.js. Une fois cela fait, ouvrer votre fichier main.html dans votre navigateur. Ensuite retourner dans VSC puis créer une petite base en HTML comme ceci :
<!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>Animation Scroll</title>
</head>N’oubliez pas également de joindre/link vos deux autres fichiers (JS & CSS) à votre
main.html!
Pour continuer avec le code HTML, concever différentes <sections> ou <div> qui contiendront du texte (n’importe lequel) dans votre <body>, comme par exemple <h1>Hello World<h1/>.
Pour mettre en forme votre fichier HTML en forme, ouvrez style.css et élaborer un petit code en CSS comme par exemple :
body {
background-color: #000000;
color: rgb(255, 255, 255);
font-family:'Times New Roman', Times, serif;
padding: 0;
margin: 0;
}
[div OR section] {
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
}Remplacer [div OR section] par ce que vous avez choisi dans le fichier main.html.
II. Animation
Dans cette partie, nous allons nous concentrer sur la partie animation lors du scroll. Ceci, en mettant en route une fonction qui va scanner si tel ou tel élément est visible sur la fenêtre ou non.
Texte animé
Pour commencer l’animation avec le texte, il faut ajouter la classe "hidden" à chaque
<div>/<section>précédemment créé, pour exemple :<div class="hidden"> <h1>Salut la communauté GCA</h1> </div>
Ensuite, rendez-vous dans votre fichier app.js. Puis copier le code suivant :
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
});
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el)=> observer.observe (el));Ce code va sélectionner les éléments ayant comme classe "hidden", puis vérifier si ces éléments croisent la fenêtre (endroit où nous nous situons sur la page) ou non grâce à la fonction
Observerqui va tout simplement observer uniquement les éléments avec la classe "hidden". Si l’entrée se croise alors, le code va créer ou retirer la classe "show" automatiquement.
On peut donc maintenant définir la classe "show" et ce qu’elle fait dans le style.css. Pour cela, il faut appeler la classe "hidden" et "show". Si l’on souhaite que notre texte soit caché, il suffit de définir "hidden" comme ceci :
.hidden {
opacity : 0;
transition : all 2s;
}Pour la classe "show", c’est la même chose sauf que l’on rend texte visible :
.show {
opacity: 1;
}N’oubliez pas d’enregistrer vos fichiers et de rafraichir la page
HTML!
Et voilà comment faire un texte animé pendant le scroll de la page !
Image animée
Pour animer une image on utilise le même type de processus. En effet, il faut pour commencer retourner dans votre fichier main.html puis créer une <div> avec la classe "logos", cette classe regroupe nos images/logos dans une seule <div> pour ensuite les définir plus facilement dans le fichier CSS. Ensuite, à l’intérieur de cette <div>, créer différentes <section> ou <div> avec la classe (encore une fois) "hidden" mais en rajoutant cette fois-ci "logo" en plus de "hidden", faire cette manipulation permettra dans le fichier style.css de rendre indépendant nos images du texte. On obtiendra donc "logo hidden" et "show hidden" lors de la modification par le fichier app.js. Bien évidemment, à l’intérieur de cette <div>/<section>, intégrer une image ou un logo avec <img src="gca.png>" .
Au total, cela donnera par exemple :
<div class="logos">
<section class="logo hidden">
<img src="gca_logo.png">
</section>
<section class="logo hidden">
<img src="welcome_gca.jpg">
</section>
</div>Ici, le code JavaScript restera le même car on fait appel à la même fonction qui est ici la classe "hidden".
Maintenant, comme pour le texte animé, il suffit de définir les classes "logos", "logo show" et "logo hidden".
Ouvrez votre style.css, puis définissez les classes. Pour la classe "logos", par exemple :
.logos {
display: flex;
}Pour la classe "logo hidden" c’est un peu plus complexe et particulier. A fortiori, il ne faut pas definir "logo hidden" mais bien "logo" puisque le classe "hidden" à déjà été défini préalablement, effectivement, on définira uniquement la classe "logo", si l’on teste sans, notre code ne va tout simplement pas marcher. On obtiendra donc, par exemple :
.logo {
display: flex;
border-radius: 1rem;
}Et voilà ! Voici comment animer une image pendant le défilement de la page.
III. Pour aller plus loin
Cette section va porter sur la partie customisation approfondie des effets de transitions/animations.
Customisation & Transition
Un petit exemple de customisation sur l’animation du texte en CSS :
.hidden {
opacity : 0;
transition: all 2s;
filter: blur(5px)
transform: translateX(-100%)
}N’hésite pas à jouer avec tous les effets disponibles en
CSSpour un rendu 100% personnalisé.
Vous pouvez également utiliser des petites transitions customisées avec des temps différents.
.logo:nth-child(2) {
transition-delay: 400ms;
}
.logo:nth-child(3) {
transition-delay: 600ms;
}
.logo:nth-child(4) {
transition-delay: 800ms;
}Cela va donc donner par exemple :
Expérimentez vous-même
Essayez de sortir de l’esprit tutoriel et de comprendre réellement ce que vous copiez/écrivez. Vérifiez vos connaissances en reproduisant le même type de code mais en modifiant quelques variables ou en l’ajustant à votre guise. En bref, éviter de vous enfermer dans les tutos.
IV. Conclusion & Aide
Synthèse
Pour conclure, l’animation pendant le Scroll apporte un réel confort visuel pour votre site. Elle peut être paramétrer de manière simple et de différentes façons. Ces animations sont 100% personnalisables grâce à l’ajout de quelques lignes de codes.
Aide
Si vous rencontrez des difficultés, n’hésitez pas à jeter un œil au code, il est entièrement à votre disposition : HTML|CSS|JavaScript
ou à me contacter via MP sur Discord (SSTagX#1400).
✨ Un grand merci à vous pour avoir suivi ce tutoriel jusqu’au bout !
En espérant qu’il vous a été utile ! (Mettez un petit❤si c’est le cas !)
HTML #Animation #CSS #JS #Web development
Commentaires