Animação ao rolar com JavaScript [IntersectionObserver]

👀 Demonstração

💡 Usos e Benefícios deste Modelo

Este modelo anima elementos com um efeito suave quando entram na área visível ao rolar.

• ✅ Guia naturalmente a atenção do usuário (menos conteúdo despercebido)
• ✅ Melhora a legibilidade ao evitar sobrecarregar com muito conteúdo de uma vez
• ✅ Permite carregamento tardio de imagens, gráficos, etc. usando IntersectionObserver
• ✅ Leve e fácil de personalizar — ideal para landing pages, listas de produtos, FAQs, etc.
• ✅ Melhora a impressão geral da página com simples animações

A velocidade e distância da animação podem ser facilmente ajustadas com CSS para personalização.

📋 Código para Copiar

<style>
.box {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  margin: 1rem 0;
}
.box.visible {
  opacity: 1;
  transform: translateY(0);
}
</style>

<div class="box fadein">🍎 Apple</div>
<div class="box fadein">🍊 Orange</div>
<div class="box fadein">🍌 Banana</div>
<div class="box fadein">🍇 Grape</div>
<div class="box fadein">🍉 Watermelon</div>

<script>
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      observer.unobserve(entry.target); // Se quiser exibi-lo apenas uma vez
    }
  });
});
document.querySelectorAll(".fadein").forEach(el => observer.observe(el));
</script>

      📋 Copiar
    

🧩 Como funciona o IntersectionObserver e dicas de implementação

IntersectionObserver é uma API do navegador que permite detectar quando um elemento específico entra na área visível da tela (viewport). Comparado ao evento tradicional de scroll, é mais leve e oferece melhor desempenho, sendo ideal para otimizar animações.

🔍 Onde pode ser utilizado?

Além de animações com base no scroll, pode ser usado para carregamento preguiçoso (lazy loading) de imagens ou vídeos, ativação de anúncios e muito mais. Sua flexibilidade o torna útil em diversos cenários da web.

⚙ Dicas para implementação

Para manter um bom desempenho, utilize unobserve() para parar de observar elementos após sua exibição. Ao lidar com múltiplos elementos, use querySelectorAll() e percorra cada um com um loop para aplicar o observador.

Combinado com animações, o IntersectionObserver melhora significativamente o apelo visual do seu site. Não se esqueça de ajustar transform e transition no CSS para obter o melhor efeito.