Pré-visualização de animações de scroll
Pré-visualize online e de graça o comportamento de animações CSS acionadas por scroll com nossa ferramenta. Escolha entre 12 presets, incluindo fade-in, slide-up, scale, flip, rotate, blur e bounce. Ajuste o timing, o easing, o stagger e o limite com pré-visualização ao vivo, e depois copie o código CSS e JavaScript pronto para usar. Sem cadastro.
Preview CSS scroll-triggered animation behaviors with adjustable settings. Choose a preset, tune timing and easing, then scroll the preview panel to see the animation in action. Copy the ready-to-use CSS and JavaScript snippet.
600ms
0ms
15% of element visible
100ms between each
Live Preview
Scroll inside the box to trigger↓ Scroll down to see animations
Fast Performance
Optimised for speed and efficiency
Secure by Default
Privacy-first, no data leaves your device
Beautiful Design
Clean, modern UI that users love
Fully Responsive
Works perfectly on any screen size
Zero Config
Works out of the box, no setup needed
Global CDN
Lightning-fast delivery worldwide
Generated CSS + JavaScript
@keyframes scroll-anim {
from { opacity: 0; }
to { opacity: 1; }
}
.scroll-reveal {
opacity: 0;
animation: scroll-anim 600ms ease-out 0ms both;
animation-play-state: paused;
}
.scroll-reveal.is-visible {
animation-play-state: running;
}
/* Stagger children */
.scroll-reveal:nth-child(1) { animation-delay: 0ms; }
.scroll-reveal:nth-child(2) { animation-delay: 100ms; }
.scroll-reveal:nth-child(3) { animation-delay: 200ms; }
.scroll-reveal:nth-child(4) { animation-delay: 300ms; }
/* JavaScript (Intersection Observer) */
/*
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.15 }
);
document.querySelectorAll('.scroll-reveal').forEach((el) => observer.observe(el));
*/Por que usar nossa pré-visualização de animações de scroll?
- Pré-visualização instantânea de animações de scroll: pré-visualize 12 presets de animação CSS de scroll em tempo real com nossa ferramenta. Ajuste duração, atraso, easing, distância e limite com controles deslizantes e veja a animação atualizar na hora no painel de pré-visualização ao vivo.
- Pré-visualização de animações de scroll online e segura: a ferramenta roda inteiramente no seu navegador. Nenhuma configuração de animação, código CSS ou dado de uso é enviado a qualquer servidor. Seu trabalho de design permanece totalmente privado no seu dispositivo.
- Pré-visualização de animações de scroll - sem instalação: use a ferramenta diretamente em qualquer navegador moderno, sem downloads, plugins ou ferramentas de build. Pré-visualize animações de scroll de qualquer dispositivo e copie o snippet de CSS e JavaScript pronto para produção.
- 100% grátis com 12 presets de animação: a ferramenta é totalmente gratuita, sem cadastro, sem limites de uso e sem anúncios. Escolha entre 12 presets como fade, slide, scale, flip, rotate, blur, bounce e zoom - cada um com controles completos de timing e stagger.
Casos de uso comuns da pré-visualização de animações de scroll
- Animações de entrada em landing pages: use a ferramenta para prototipar animações fade-in e slide-up para seções de landing page. Ajuste o limite e o atraso de stagger para criar uma sequência de revelação polida conforme os usuários rolam a página.
- Animações de cards e grades de recursos: pré-visualize animações escalonadas de scale-in ou slide-up para grades de cards de recursos. O controle de stagger permite definir o atraso exato entre cada card para criar um efeito de revelação em cascata.
- Seções de posts de blog e artigos: páginas com muito conteúdo se beneficiam de animações fade-in sutis que chamam a atenção para cada seção ao entrar na viewport. Use a ferramenta para encontrar a duração e o limite certos para conteúdo legível.
- Páginas de portfólio e vitrine: sites de portfólio usam animações de scroll marcantes como flip-in, rotate-in e zoom-fade para causar primeiras impressões memoráveis. Pré-visualize esses efeitos antes de definir uma direção de design.
- Listagens de produtos de e-commerce: grades de produtos usam animações escalonadas de scale-in para tornar a navegação dinâmica e envolvente. A ferramenta permite ajustar o atraso de stagger e o easing à personalidade da sua marca.
- Dashboards e visualização de dados: gráficos e cards de dados se beneficiam de animações sutis de blur-in ou fade-in que sinalizam a conclusão do carregamento. Use a ferramenta para encontrar animações informativas em vez de distrativas.
O que é uma animação de scroll?
Uma animação de scroll é uma animação CSS que dispara quando um elemento entra na viewport do navegador conforme o usuário rola. Diferentemente das animações de hover, as de scroll exigem JavaScript para detectar quando os elementos ficam visíveis. A abordagem padrão usa a API Intersection Observer - uma API nativa do navegador que observa elementos com eficiência e executa um callback quando eles cruzam um limite de visibilidade. Nossa ferramenta combina animações CSS @keyframes com um Intersection Observer para simular exatamente como suas animações de scroll se comportarão em produção. O código gerado usa animation-play-state: paused por padrão e muda para running quando o elemento fica visível - um padrão que funciona de forma confiável em todos os navegadores modernos.
Como funciona nossa pré-visualização de animações de scroll
- Escolha um preset e ajuste as configurações: selecione um dos 12 presets de animação (fade, slide, scale, flip, rotate, blur, bounce, zoom) na lista. Use os controles deslizantes para ajustar duração (100-2000 ms), atraso, função de easing, distância de translação e o limite do Intersection Observer (quanto do elemento deve estar visível antes de disparar).
- Role o painel de pré-visualização: o painel de pré-visualização ao vivo contém 6 cards de demonstração. Role para baixo dentro do painel para disparar as animações. A ferramenta usa um Intersection Observer real no contêiner de pré-visualização, então o comportamento corresponde exatamente ao de produção. Clique em Repetir animação para reiniciar e reproduzir do topo.
- Copie o código gerado: o painel de saída mostra a regra @keyframes completa, as definições de classe CSS e um snippet de JavaScript com o Intersection Observer. Copie tudo com um clique e cole diretamente no seu projeto.
O que a pré-visualização de animações de scroll gera
- Regra @keyframes: a animação de keyframes completa do preset selecionado, usando as propriedades opacity, transform e filter, que são compostas pela GPU para um desempenho fluido.
- Classes CSS: uma classe base .scroll-reveal (oculta, animação pausada) e uma classe modificadora .is-visible (animação rodando). Aplique .scroll-reveal a qualquer elemento que você queira animar ao rolar.
- Atrasos de stagger: quando o stagger está ativado, a saída inclui seletores nth-child com valores incrementais de animation-delay para os 4 primeiros filhos - prontos para usar em grades de cards e listas de recursos.
- Snippet de JavaScript: uma implementação completa de Intersection Observer que adiciona .is-visible quando os elementos entram na viewport, com o limite configurado e o comportamento opcional de unobserve após o disparo.
Boas práticas de desempenho para animações de scroll
Para o melhor desempenho em animações de scroll, anime apenas as propriedades opacity e transform - elas são tratadas pelo compositor da GPU e não causam recálculos de layout ou pintura. Evite animar width, height, top, left ou margin, pois causam reflows de layout custosos. O preset blur-in usa filter: blur(), que também é composto pela GPU em navegadores modernos, mas pode ser custoso no celular - teste em dispositivos de entrada antes de publicar. Respeite sempre a media query prefers-reduced-motion do usuário envolvendo seu CSS de animação de scroll em @media (prefers-reduced-motion: no-preference) para desativar animações em quem solicitou movimento reduzido nas configurações do sistema.
Perguntas frequentes
Uma ferramenta de pré-visualização de animações de scroll permite prototipar em tempo real animações CSS acionadas por scroll antes de adicioná-las ao seu projeto. Nossa pré-visualização cobre 12 presets com controles ajustáveis de duração, atraso, easing, distância, limite e stagger - tudo rodando localmente no seu navegador e sem cadastro.
As animações de scroll usam a API Intersection Observer para detectar quando os elementos entram na viewport. Quando um elemento cruza o limite configurado, o JavaScript adiciona uma classe que dispara uma animação CSS @keyframes. A animação começa pausada e passa a rodar quando a classe é adicionada.
Sim - a ferramenta de pré-visualização de animações de scroll é 100% grátis, sem cadastro, sem conta e sem limites de uso. Pré-visualize e copie quantas configurações de animação de scroll quiser, totalmente grátis para sempre.
O limite controla quanto do elemento deve estar visível antes de a animação disparar. Um limite de 0 dispara assim que qualquer parte entra na viewport. Um limite de 0,5 dispara quando 50% está visível. Use 0,1-0,2 para a maioria das animações de scroll.
Quando ativado, o Intersection Observer chama unobserve() após a animação disparar - o elemento nunca mais será animado, mesmo que o usuário volte a rolar para cima. Quando desativado, a animação é disparada novamente toda vez que o elemento entra na viewport.
O stagger adiciona um animation-delay incremental a cada elemento filho para que sejam animados um após o outro. A ferramenta gera seletores CSS nth-child com atrasos crescentes com base no atraso de stagger configurado.
Para o melhor desempenho, anime apenas opacity e transform. Elas são compostas pela GPU e não causam recálculos de layout ou pintura. Os presets da ferramenta usam apenas essas propriedades (além de filter: blur para o preset blur-in).
Envolva seu CSS de animação de scroll em @media (prefers-reduced-motion: no-preference) { ... } para desativar as animações para usuários que solicitaram movimento reduzido nas configurações de acessibilidade do sistema operacional. É um requisito importante de acessibilidade.