Animação ao rolar a página (scroll reveal em CSS)

Animação ao rolar a página (scroll reveal em CSS): para que serve

Seções que aparecem enquanto o visitante rola deixam a página mais viva. Este gerador cria o efeito só com CSS, usando as animações ligadas à rolagem (animation-timeline: view()), sem bibliotecas como AOS ou ScrollReveal.

Escolha o efeito (subir, só aparecer, deslizar dos lados, crescer ou sair do desfoque), a distância e em que ponto da entrada na tela a animação termina, e role a prévia. O código fica dentro de um @supports, então no Firefox, que ainda mantém o recurso atrás de uma opção experimental, os elementos aparecem normais em vez de ficarem invisíveis, e respeita quem pediu menos movimento.

Como usar

1. Escolha o efeito e a distância.
2. Defina em que ponto a animação termina.
3. Copie o CSS e aplique a classe nas seções.

Quando usar

• Landing pages.
• Seções de serviços e depoimentos.
• Portfólios.

Perguntas frequentes

Funciona em todos os navegadores?

As animações ligadas à rolagem (animation-timeline) funcionam no Chrome, no Edge e no Safari 26 ou mais novo. No Firefox ainda estão atrás de uma opção experimental. Por isso o código fica dentro de um @supports: onde o recurso não existe, os elementos simplesmente aparecem normais, sem ficar invisíveis.

Por que não usar uma biblioteca como AOS ou ScrollReveal?

Essas bibliotecas usam JavaScript para observar a rolagem, o que pesa no carregamento e pode travar em celulares fracos. Com animation-timeline, o próprio navegador cuida da animação, e o site fica mais leve.

E quem prefere menos movimento?

O código respeita prefers-reduced-motion: para quem ativou essa opção no aparelho, os elementos aparecem sem deslizar nem crescer.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas