Animer des éléments au défilement

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 19 sur 27.

Parfois, nous voulons que les éléments s'animent (fondus, glissements, zooms, etc.) lorsqu'ils entrent dans la fenêtre d'affichage (viewport) lors du défilement.
Cela se fait souvent en vérifiant si l'élément est visible à l'écran, puis en ajoutant une classe qui déclenche une animation ou une transition CSS.

Tout d'abord, créons un élément HTML simple :

<div class="animate-on-scroll">This element will animate when scrolled into view</div>

Ensuite, ajoutez le CSS pour l'animation :

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

Maintenant, créons une fonction JavaScript pour détecter quand les éléments défilent dans la vue. Comme nous pouvons avoir plusieurs éléments, nous les parcourons avec forEach et vérifions la position de chaque élément par rapport à la fenêtre d'affichage.

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // Get element position relative to viewport
    const position = element.getBoundingClientRect();
    
    // If element is in viewport
    if(position.top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
}

// Run on scroll
window.addEventListener('scroll', checkScroll);

// Run once on page load
checkScroll();

Lorsqu'un élément avec la classe animate-on-scroll entre dans la fenêtre d'affichage, le script ajoute la classe visible, déclenchant l'animation.

Défi

Facile

À l'intérieur de la boucle, créez une instruction if.

La condition doit vérifier : si la position supérieure (top position) de l'élément est inférieure à window.innerHeight - 50.
Si la condition est vraie, utilisez .classList.add("active") pour ajouter la classe active à cet élément.

De cette façon, chaque fois qu'un élément défile dans la vue (à moins de 50px du bas de l'écran), il apparaîtra progressivement avec fluidité.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Scroll Animation Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Discover the Beauty of Nature</h1>
    <p>Scroll down to reveal the magic</p>
  </header>

  <div class="container">
    <div class="fade-in card">
      <h2>Mountains</h2>
      <p>Standing tall and timeless, mountains remind us of strength and stability.</p>
    </div>

    <div class="fade-in card">
      <h2>Forests</h2>
      <p>Forests are the lungs of our planet, offering peace and endless green beauty.</p>
    </div>

    <div class="fade-in card">
      <h2>Rivers</h2>
      <p>Calm or powerful, rivers flow endlessly, connecting life along their paths.</p>
    </div>

    <div class="fade-in card">
      <h2>Deserts</h2>
      <p>Silent and vast, deserts teach us resilience and the value of every drop of water.</p>
    </div>

    <div class="fade-in card">
      <h2>Oceans</h2>
      <p>The oceans cover most of our Earth, a mysterious world full of wonder and life.</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>