Animar elementos ao rolar

Parte da seção JavaScript em Ação do Journey de HTML da Coddy. Lição 19 de 27.

Às vezes, queremos que os elementos sejam animados (apareçam gradualmente, deslizem para dentro, aumentem o zoom etc.) quando entram na área visível durante a rolagem.
Isso geralmente é feito verificando se o elemento está visível na tela e, em seguida, adicionando uma classe que aciona uma animação ou transição CSS.

Primeiro, vamos criar um elemento HTML simples:

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

Em seguida, adicione o CSS para a animação:

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

Agora, vamos criar uma função JavaScript para detectar quando os elementos entram na área visível durante a rolagem. Como podemos ter vários elementos, percorremos todos eles com forEach e verificamos a posição de cada elemento em relação à janela de visualização.

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // Obtém a posição do elemento em relação à área visível
    const position = element.getBoundingClientRect();
    
    // Se o elemento estiver na área visível
    if(position.top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
}

// Executa ao rolar a página
window.addEventListener('scroll', checkScroll);

// Executa uma vez ao carregar a página
checkScroll();

Quando um elemento com a classe animate-on-scroll entra na área visível da página, o script adiciona a classe visible, acionando a animação.

Desafio

Fácil

Dentro do loop, crie uma instrução if.

A condição deve verificar: se a posição superior do elemento é menor que window.innerHeight - 50.
Se a condição for verdadeira, use .classList.add("active") para adicionar a classe active a esse elemento.

Assim, sempre que um elemento entrar na área visível (a até 50px da parte inferior da tela), ele aparecerá gradualmente.

Experimente você mesmo

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