JavaScript Academy · Aula

Animações acionadas pela rolagem

Anime elementos conforme eles entram na área visível.

Animações acionadas pela rolagem é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Animando durante a rolagem

Um efeito popular é fazer os elementos aparecerem gradualmente ou deslizarem para a área de visualização conforme o usuário rola até eles. O observer de interseção torna isso simples: adicione uma classe de CSS quando um elemento entrar na área de visualização e deixe o CSS cuidar da animação.

O lado do CSS

Defina no CSS um estado inicial oculto e um estado final visível. O JavaScript apenas alterna uma classe; a transição é totalmente feita em CSS, o que a mantém fluida.

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

Selecionando os alvos

Marque com uma classe compartilhada os elementos que você quer animar e depois reúna-os.

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

Criando o observer

Use um limiar para que a animação comece quando uma parte significativa do elemento estiver visível, e não apenas um pixel.

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

Adicionando a classe

Na função de retorno, adicione a classe visible aos elementos-alvo em interseção. Em seguida, o CSS os animará para dentro da área de visualização.

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

Animando uma vez

Para uma revelação única, use unobserve no elemento depois de adicionar a classe, para que ele não seja animado novamente quando sair e voltar à área de visualização.

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

Animando novamente nos dois sentidos

Se quiser que os elementos também sejam animados ao sair, alterne a classe com base em isIntersecting e continue observando-os.

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

Iniciando a observação

Use observe em cada elemento-alvo para começar o acompanhamento. O observer é acionado enquanto o usuário passa por cada um deles ao rolar a página.

items.forEach(el => observer.observe(el));

Criando animações escalonadas

Crie uma sequência aplicando um atraso incremental à transição. Você pode defini-lo a partir de um atributo de dados ou do índice do elemento.

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

Respeitando a redução de movimento

Alguns usuários preferem reduzir o movimento. Verifique a consulta de mídia e ignore as animações para essas pessoas, exibindo o conteúdo imediatamente.

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

Ganhos de desempenho

Como o trabalho pesado é feito pelas transições de CSS e a detecção de visibilidade é transferida para o navegador, as animações de rolagem continuam fluidas mesmo com muitos elementos. Sem cálculos de eventos de rolagem e sem travamentos.

Verificação rápida

Teste sua compreensão das animações acionadas pela rolagem.

Recapitulação

Você criou animações acionadas pela rolagem:

Defina estados ocultos e visíveis no CSS.
Observe os elementos-alvo com um threshold adequado.
Alterne uma classe na interseção; o CSS faz a animação.
Use unobserve para revelações únicas.
Respeite prefers-reduced-motion.

Você concluiu o observer de interseção. Agora, vamos conhecer os Web Workers.

Perguntas Frequentes

A aula “Animações acionadas pela rolagem” é grátis?

Sim — o texto completo de “Animações acionadas pela rolagem” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Animações acionadas pela rolagem”?

Anime elementos conforme eles entram na área visível. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Animações acionadas pela rolagem”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy