Scroll Snap
Também chamada Scroll Snapping, Snap Scrolling
A rolagem se encaixa em pontos definidos, como slides ou seções.
Onde usar
Carrosséis, seções de tela cheia e galerias
Variações
- mandatory
- proximity
- x axis
- y axis
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 "Scroll Snap" (também chamado de scroll snapping ou snap scrolling) em [onde].
Quando a rolagem parar, a tela deve se encaixar certinho na seção mais próxima, para que cada uma fique alinhada à borda em vez de parar no meio.
Use o encaixe nativo do navegador para que a rolagem por roda do mouse, toque e teclado continue funcionando, e garanta que conteúdos mais altos que a tela possam ser lidos por inteiro.Animações parecidas
A
B
C
Clique
Carousel Slide (carrossel)
Também chamada Slider, Swipe carousel, Scroll-snap carousel
Os slides passam na horizontal por uma área visível, encaixando um item de cada vez.
Onde usar
Banners de hero, galerias de produtos
Adicione um carrossel ("Carousel Slide", também chamado slider ou swipe carousel) em [onde].
Cada passo deve deslizar a fileira para o lado para que o próximo slide se encaixe no centro, suave e desacelerando, com os vizinhos aparecendo nas bordas e os pontos de posição acompanhando.
Avance um slide por vez, aceite deslizar no toque além de botões e setas do teclado, e coloque rótulos nos controles para leitores de tela.Role aqui dentro
Smooth Scroll (rolagem suave)
Também chamada Smooth Scrolling, Inertia Scroll
A rolagem e os saltos para âncoras deslizam com suavização em vez de se moverem de forma brusca.
Onde usar
Navegação por âncoras e páginas com cara premium
Adicione uma rolagem suave (Smooth Scroll, também chamada de smooth scrolling ou inertia scroll) em [onde].
A rolagem e os saltos para âncoras devem deslizar e desacelerar suavemente em vez de andar aos trancos, com sensação leve e responsiva, sem atraso pesado.
Mantenha o comportamento nativo, como rolagem pelo teclado, barra de rolagem e busca na página, e desligue a suavização se o usuário preferir movimento reduzido (prefers-reduced-motion).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).A
B
C
D
Role aqui dentro
Stacking Cards
Também chamada Sticky Stacking Cards, Card Stack Scroll
Os cards ficam fixos no topo durante a rolagem e se empilham uns sobre os outros, muitas vezes encolhendo os anteriores.
Onde usar
Listas de recursos e portfólios
Adicione "Stacking Cards" (também chamados de sticky stacking cards ou card stack scroll) em [onde].
Conforme o leitor rola, cada card deve ficar fixo perto do topo e o próximo deve subir por cima dele, enquanto os de baixo encolhem um pouco, formando uma pilha organizada.
Deixe aparecer uma borda fina de cada card anterior e dê ao último espaço suficiente para chegar à sua posição antes do fim da seção.Mais em Scroll
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).Role aqui dentro
Scroll-Triggered Animation
Também chamada Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions
Uma animação é reproduzida uma vez quando um elemento entra ou sai da viewport.
Onde usar
Seções com fade-in e revelações sob demanda
Adicione uma "Scroll-Triggered Animation" (também chamada de reveal on scroll ou animate on scroll) em [onde].
Cada item deve aparecer com fade e subir até o lugar uma única vez ao entrar na tela, no próprio ritmo rápido e suave, em vez de acompanhar a posição de rolagem.
Mantenha o conteúdo visível se os scripts não carregarem e mostre os itens na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).