Revelar ao rolar, uma barra de progresso de leitura, parallax e uma história fixa, cada um feito de três jeitos: animações CSS guiadas pela rolagem, IntersectionObserver e GSAP ScrollTrigger.
Animações de rolagem disparam efeitos quando o conteúdo entra na tela ou conforme a página rola. O CSS moderno liga keyframes à rolagem com animation-timeline: view() ou scroll(), sem script onde há suporte. O IntersectionObserver em JavaScript ativa classes de revelação em qualquer navegador, e o GSAP ScrollTrigger cuida de fixação e timelines controladas pela rolagem. Sempre respeite prefers-reduced-motion.
Escolha uma abordagem
Os quatro efeitos mais pedidos, revelar ao rolar, barra de progresso de leitura, parallax e história fixa, aparecem cada um em CSS puro, em JavaScript simples com IntersectionObserver e em GSAP ScrollTrigger. As versões em CSS rodam ao vivo em quadros com rolagem, e a versão com observer roda como demo funcional nesta própria página.
Liga o progresso de uma animação à rolagem em vez do tempo. scroll() acompanha quanto um contêiner de rolagem já rolou, do topo ao fim. view() acompanha a passagem de um elemento pela área visível, então os keyframes rodam conforme ele entra e sai.
Chrome e Edge desde a versão 115, e Safari desde a versão 26. O Firefox tem o recurso atrás de uma preferência, e não ativado por padrão, então confira o caniuse antes de depender dele e sempre ofereça uma alternativa.
Para saber quando um elemento entra ou sai da tela, sim. O navegador calcula as interseções de forma assíncrona e só chama você quando algo muda, enquanto um listener de scroll roda muitas vezes por segundo e tenta você a fazer leituras de layout que causam engasgos.
Não para revelações simples ou uma barra de progresso. O GSAP ScrollTrigger vale a pena para seções fixadas, timelines de várias etapas controladas pela rolagem, snapping e efeitos que precisam se comportar igual em todos os navegadores hoje.
Dentro de uma media query prefers-reduced-motion: reduce, mostre o conteúdo no estado final e remova parallax e movimentos grandes. Em JavaScript, verifique a mesma query com window.matchMedia antes de criar animações. Esmaecimentos suaves de opacidade costumam ser aceitáveis.
Cada quadro rola de forma independente. Em um navegador sem animation-timeline, a proteção com @supports deixa tudo visível e parado.
Cada card aparece e sobe ao entrar no viewport. animation-range limita o efeito à fase de entrada.
scroll(root) acompanha a rolagem do documento. A barra vai de 0 à largura total sem nenhum listener.
A camada interna se move mais devagar que a página enquanto a sua caixa atravessa o viewport. Desativada para movimento reduzido.
A imagem fica fixada com position: sticky enquanto cada etapa se ilumina ao cruzar o meio do quadro.
A demo ao vivo perto do topo desta página roda esse mesmo padrão em React. Estas versões funcionam em qualquer framework, ou sem nenhum.
Os cards só começam escondidos depois que o script rodou, adicionando antes uma classe ao html, então um script com falha os deixa visíveis.
O progresso precisa da posição exata de rolagem, então este usa um listener de scroll passivo com limitação de um quadro.
Uma faixa fina de observação no meio da tela marca como ativa a etapa que estiver cruzando por ela.
Só código. O ScrollTrigger é um plugin do GSAP; os dois são gratuitos sob a licença do próprio GSAP, que você deve ler antes de publicar.
gsap.matchMedia só executa a configuração quando o leitor não pediu movimento reduzido, e a desfaz se a preferência mudar.
Role dentro da caixa. Os cards aparecem uma vez, a barra acompanha o progresso, a camada listrada se move mais devagar que o conteúdo e o painel fixado segue a etapa que cruza o meio.
O movimento reduzido está ativado, então os cards aparecem sem se mover e o parallax fica desligado.
Progresso de rolagem na demo
Área de demo com rolagem
Comece a rolar.
Camada de parallax
Comece grátis · Sem cartão de crédito