Animar elementos al desplazarse

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 19 de 27.

A veces queremos que los elementos se animen (aparezcan gradualmente, se deslicen hacia dentro, hagan zoom, etc.) cuando entran en la ventana gráfica mientras nos desplazamos.
Esto suele hacerse comprobando si el elemento es visible en la pantalla y después añadiendo una clase que activa una animación o transición de CSS.

Primero, vamos a crear un elemento HTML simple:

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

A continuación, añade el CSS para la animación:

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

Ahora, vamos a crear una función de JavaScript para detectar cuándo los elementos aparecen en la vista al desplazarse. Como podemos tener varios elementos, recorremos cada uno con forEach y comprobamos la posición de cada elemento en relación con la ventana gráfica.

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // Obtener la posición del elemento relativa al viewport
    const position = element.getBoundingClientRect();
    
    // Si el elemento está en el viewport
    if(position.top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
}

// Ejecutar al hacer scroll
window.addEventListener('scroll', checkScroll);

// Ejecutar una vez al cargar la página
checkScroll();

Cuando un elemento con la clase animate-on-scroll entra en el viewport, el script añade la clase visible, activando la animación.

Desafío

Fácil

Dentro del bucle, crea una sentencia if.

La condición debe comprobar: si la posición superior del elemento es menor que window.innerHeight - 50.
Si la condición es verdadera, usa .classList.add("active") para añadir la clase active a ese elemento.

De esta forma, cada vez que un elemento se desplace hasta quedar visible (a menos de 50px de la parte inferior de la pantalla), aparecerá gradualmente con suavidad.

Pruébalo tú mismo

<!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>