Animation d’apparition au défilement avec JavaScript et CSS
Dans ce tutoriel, nous allons développer ensemble une animation d’apparition au défilement en utilisant JavaScript et l’objet IntersectionObserver ou simplement en écoutant sur l'évènement scroll. Les éléments qui doivent être animés sont définis avec une classe CSS, et l'animation est déclenchée lorsque l'élément entre dans la zone visible de la fenêtre du navigateur.
Prérequis
- Connaissance de base de HTML, CSS et JavaScript
- Connaissance des sélecteurs CSS et des classes en JavaScript
1ère méthode: IntersectionObserver
L’objet IntersectionObserver est une API JavaScript qui permet de détecter lorsqu’un élément entre ou sort de la zone visible de la fenêtre du navigateur. Il peut être utilisé pour implémenter une animation d’apparition au défilement de manière efficace et performante. Voici un exemple d’implémentation de l’animation d’apparition au défilement en utilisant IntersectionObserver :
Code HTML
Les éléments qui doivent être animés doivent avoir une classe .animate-on-scroll.
<div class="animate-on-scroll">Contenu à animer</div>Code CSS
Les styles de base sont définis pour cacher les éléments animés jusqu’à ce qu’ils soient en train d’intersecter avec la zone visible, avec une opacité initiale de 0 et une translation initiale de 50 pixels vers le bas. Lorsque la classe .is-visible est ajoutée, l’opacité est définie à 1 et la translation initiale est annulée.
.animate-on-scroll {
/* Initialement invisible avec une opacité de 0 */
opacity: 0;
/* Translation initiale de 50 pixels vers le bas */
transform: translateY(50px);
/* Animation pour la transparence et la translation */
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.animate-on-scroll.is-visible {
/* Devenir visible avec une opacité de 1 */
opacity: 1;
/* Translation initiale de 0 pixels */
transform: translateY(0);
}Code JavaScript
Le script JavaScript instancie un objet IntersectionObserver avec les options spécifiées. Lorsque les entrées intersectent la zone visible, la classe .is-visible est ajoutée pour déclencher l’animation CSS. Les éléments animés sont observés en utilisant la méthode observe de l’observateur d’intersection.
// Ceci est une fonction auto - exécutable.Les fonctions auto - exécutables
// sont des fonctions qui s'exécutent immédiatement après leur déclaration,
// sans avoir besoin d'être appelées.Les accolades immédiatement après la
// déclaration de la fonction et les parenthèses à la fin de la déclaration
// définissent la fonction et permettent de l'exécuter immédiatement.
(function () {
// Utilisation de la directive "use strict" pour activer le mode strict en JavaScript
// Cela implique une meilleure gestion des erreurs et une syntaxe plus stricte pour le code
"use strict"
// Sélectionne tous les éléments avec la classe "animate-on-scroll"
const elements = document.querySelectorAll(".animate-on-scroll");
// Options pour l'observateur d'intersection
const options = {
threshold: 0.25
};
// Instanciation de l'observateur d'intersection
const observer = new IntersectionObserver(function (entries, observer) {
// Boucle sur chaque entrée pour traiter les intersections
entries.forEach(entry => {
// Si l'entrée est en train d'intersecter avec la zone visible
if (entry.isIntersecting) {
// Ajouter la classe "is-visible" pour déclencher l'animation
entry.target.classList.add("is-visible");
// Cesser d'observer cet élément
observer.unobserve(entry.target);
}
});
}, options);
// Observer chaque élément
elements.forEach(element => {
observer.observe(element);
});
})();2ème méthode: Scroll
Voici comment vous pouvez créer une animation d’apparition au défilement en JavaScript autrement:
- Détectez le défilement de la page en utilisant l’événement “scroll” ou “onscroll”.
- Calculez la position de l’élément par rapport à la fenêtre du navigateur à l’aide de la méthode “getBoundingClientRect()”.
- Si la position de l’élément est dans la zone visible de la fenêtre du navigateur, vous pouvez alors ajouter une classe à l’élément avec des styles d’animation CSS.
Voici un exemple simple de code HTML qui peut être utilisé avec l’implémentation JavaScript de l’animation d’apparition au défilement :
<div class="animate-on-scroll">Contenu à animer</div>Dans ce code, nous avons simplement un élément div avec la classe “animate-on-scroll”. C’est ce qui permettra à notre code JavaScript de détecter l’élément et d’appliquer l’animation d’apparition au défilement.
Il est également important d’avoir un peu de CSS pour styliser l’animation :
.animate-on-scroll {
/* Définit une opacité initiale de 0 pour les éléments */
opacity: 0;
/* Définit une transition d'opacité d'une seconde */
transition: opacity 1s;
}
.animate-on-scroll.is-visible {
/* Définit une opacité de 1 pour les éléments avec la classe 'is-visible' */
opacity: 1;
}
/* Ensemble, ces styles permettent aux éléments d'être rendus
transparents et de devenir progressivement plus opaques en 1 seconde
lorsque la classe 'is-visible' est ajoutée. Cela peut créer un effet
d'animation pour les éléments. */Dans ce code CSS, nous avons défini la classe “animate-on-scroll” avec une opacité initiale de 0, ce qui rend l’élément invisible au départ. Nous avons également ajouté une transition d’opacité pour lisser l’animation. La classe “is-visible” ajoute une opacité de 1, ce qui rend l’élément entièrement visible.
Et le plus important, le JavaScript:
// Ceci est une fonction auto - exécutable.Les fonctions auto - exécutables
// sont des fonctions qui s'exécutent immédiatement après leur déclaration,
// sans avoir besoin d'être appelées.Les accolades immédiatement après la
// déclaration de la fonction et les parenthèses à la fin de la déclaration
// définissent la fonction et permettent de l'exécuter immédiatement.
(function () {
// Utilisation de la directive "use strict" pour activer le mode strict en JavaScript
// Cela implique une meilleure gestion des erreurs et une syntaxe plus stricte pour le code
"use strict"
// Définir la fonction detectAndAnimate pour basculer la classe des éléments
const detectAndAnimate = () => {
// Sélectionner tous les éléments avec la classe 'animate-on-scroll'
const elements = document.querySelectorAll('.animate-on-scroll');
// Boucle sur tous les éléments sélectionnés
elements.forEach(element => {
// Vérifier si l'élément est visible dans la fenêtre du navigateur
const isVisible = isElementInViewport(element);
// Ajouter ou supprimer la classe 'is-visible' en fonction de la visibilité de l'élément
element.classList.toggle('is-visible', isVisible);
});
};
// Définir la fonction isElementInViewport pour vérifier la visibilité de l'élément dans la fenêtre du navigateur
const isElementInViewport = el => {
// Récupérer les dimensions de l'élément
const rect = el.getBoundingClientRect();
// Récupérer la hauteur de la fenêtre du navigateur
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
// Récupérer la largeur de la fenêtre du navigateur
const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
// Retourner vrai si l'élément est entièrement visible dans la fenêtre du navigateur, sinon retourner faux
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= viewportHeight &&
rect.right <= viewportWidth
);
};
// Écouter l'événement de défilement de la fenêtre du navigateur et appeler la fonction detectAndAnimate
window.addEventListener('scroll', detectAndAnimate);
// Appeler la fonction detectAndAnimate une fois au démarrage pour mettre à jour l'état des éléments
detectAndAnimate();
})()Notez que dans cet exemple, nous ajoutons un écouteur d’événement “scroll” à la fenêtre, puis nous parcourons tous les éléments avec la classe “animate-on-scroll” pour déterminer si leur position est dans la zone visible de la fenêtre du navigateur. Si c’est le cas, nous ajoutons la classe “is-visible” à l’élément, sinon nous la supprimons.
Conclusion
J’espère que ce tutoriel vous a plu et vous a été utile. Si vous avez des suggestions ou des commentaires, n’hésitez pas à me les faire parvenir. Retrouver le code source déjà fait sur mon GitHub. Merci!