Animation d'apparition au défilement avec JavaScript et CSS

<div class="animate-on-scroll">Contenu à animer</div>

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

// 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);
    });

})();

<div class="animate-on-scroll">Contenu à animer</div>

.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. */

// 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();

})()