Zoom on Scroll
Também chamada Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
Um elemento ou uma cena aumenta ou diminui conforme o usuário rola a página.
Onde usar
Intros de hero e ampliação de imagens
Variações
- zoom in
- zoom out
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
Adicione um efeito "Zoom on Scroll" (também chamado de scroll zoom ou scale on scroll) em [onde].
Enquanto a seção fica presa na tela, o elemento deve crescer suavemente de um card pequeno até ocupar a tela inteira, no ritmo da rolagem, e encolher de novo ao rolar para cima.
Faça a escala sem empurrar o layout ao redor e mostre-o no tamanho final, sem zoom, se o usuário preferir movimento reduzido (prefers-reduced-motion).Animações parecidas
Ken Burns Effect
Também chamada Slow pan and zoom, Ken Burns, Kenburns
Uma imagem estática aproxima e se desloca lentamente dentro da moldura.
Onde usar
Slideshows de hero, fundos
Adicione um "Ken Burns Effect" (também chamado slow pan and zoom) em [onde].
Enquanto cada imagem é exibida, ela deve aproximar e se deslocar bem devagar em uma única direção, depois fazer um crossfade para a próxima imagem, que se move em outra direção: calmo e contínuo.
Faça cada imagem cobrir toda a moldura o tempo todo para nenhuma borda aparecer, e deixe as imagens paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Role aqui dentro
Scroll-Linked Animation
Também chamada Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
O progresso da animação fica ligado diretamente à posição de rolagem, então rolar para a frente ou para trás a reproduz ou a rebobina.
Onde usar
Páginas de storytelling e efeitos de progresso
Adicione uma "Scroll-Linked Animation" (também chamada de scroll-driven animation ou scroll scrub) em [onde].
A animação deve acompanhar exatamente a posição de rolagem: rolar para baixo a faz avançar e rolar para cima a rebobina na hora, sem easing próprio baseado em tempo.
Mapeie a animação inteira para um trecho de rolagem bem definido e mostre um estado estático adequado se o usuário preferir movimento reduzido (prefers-reduced-motion).Passe o mouse por cima
Hover Zoom
Também chamada Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
Uma imagem aumenta dentro da moldura ao passar o ponteiro, às vezes se deslocando com ele.
Onde usar
Cards de produto, miniaturas
Adicione um efeito "Hover Zoom" (também chamado image zoom on hover ou zoom-pan) em [onde].
Enquanto o ponteiro estiver sobre a imagem, ela deve aumentar lenta e suavemente dentro da moldura, que mantém o tamanho, e voltar suavemente quando o ponteiro sai.
Recorte a imagem na moldura para nada vazar do layout e mostre o mesmo zoom no foco do teclado.A
B
C
D
Role aqui dentro
Parallax
Também chamada Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
Camadas se movem em velocidades diferentes conforme a rolagem, criando sensação de profundidade.
Onde usar
Fundos de hero, landing pages
Adicione um efeito de rolagem "Parallax" (também chamado parallax scrolling ou parallax layers) em [onde].
As camadas de fundo devem se mover mais devagar que o conteúdo ao rolar a página, com a camada mais distante se movendo menos, para uma sensação sutil de profundidade.
Mantenha o efeito ligado à posição de rolagem sem atraso, deixe o texto na camada de velocidade normal, e desative o efeito se o usuário preferir movimento reduzido (prefers-reduced-motion).Mais em Scroll
Role aqui dentro
Hide on Scroll Header
Também chamada Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation
Um cabeçalho se esconde ao rolar para baixo e reaparece ao rolar para cima.
Onde usar
Barras de navegação no celular e em páginas longas
Adicione um "Hide on Scroll Header" (também chamado headroom ou auto-hide navbar) em [onde].
O cabeçalho deve deslizar para cima e sair de vista quando o leitor rolar para baixo, e voltar a qualquer rolagem para cima: rápido e suave, reagindo à direção e não à distância.
Mostre sempre no topo da página, ignore pequenas oscilações de rolagem, e mantenha visível enquanto algo dentro dele tiver o foco do teclado.A
B
C
D
E
Role aqui dentro
Horizontal Scroll Section (rolagem horizontal)
Também chamada Horizontal Scrolling, Scroll-jacked Horizontal Gallery
A rolagem vertical move para o lado uma fileira de painéis fixada na tela.
Onde usar
Galerias, portfólios, linhas do tempo
Adicione uma seção de rolagem horizontal (Horizontal Scroll Section) em [onde], também chamada horizontal scrolling ou scroll-jacked horizontal gallery.
Quando a seção chegar ao topo, ela deve ficar fixa enquanto a rolagem para baixo move sua fileira de painéis para o lado, e se soltar quando o último painel estiver visível.
Vincule o movimento lateral diretamente à posição de rolagem para que rolar de volta o inverta, e use uma fileira normal deslizável em telas pequenas ou se o usuário preferir movimento reduzido (prefers-reduced-motion).