Pinning
Também chamada Pinned Section, Sticky Section, Scroll Pin
Um elemento fica travado no lugar durante um trecho da rolagem enquanto o restante do conteúdo ou a animação avança.
Onde usar
Storytelling guiado pela rolagem, vitrines de recursos
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 de rolagem "Pinning" (também chamado pinned section ou sticky section) em [onde].
Um painel deve ficar travado no lugar enquanto o conteúdo ao lado passa com a rolagem, mudando de acordo com a etapa que está sendo lida, e deve se soltar quando a seção terminar.
Prefira o posicionamento sticky nativo em vez de sequestrar a rolagem, e garanta que cada etapa continue legível sem o painel fixo em telas pequenas.Animações parecidas
ABC DEFGHI JKLMNO PQR
Role aqui dentro
Sticky Text Fade
Também chamada Sticky Scroll Text Opacity Fade
O texto fica fixo enquanto as linhas aparecem e somem conforme o avanço da rolagem.
Onde usar
Scrollytelling
Adicione um efeito "Sticky Text Fade" (também chamado sticky scroll text opacity fade) em [onde].
Enquanto a seção rola, o bloco de texto deve ficar fixo no lugar e as linhas devem aparecer e sumir uma de cada vez conforme o avanço da rolagem.
Ligue os fades diretamente à posição da rolagem para que se invertam ao voltar, e mantenha todas as linhas disponíveis para leitores de tela, qualquer que seja a opacidade.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.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).Role aqui dentro
Sticky Header Shrink
Também chamada Shrinking Header, Shrink on Scroll
Um cabeçalho fixo diminui de altura ou tamanho depois que o usuário rola para baixo.
Onde usar
Barras de navegação
Adicione um "Sticky Header Shrink" (também chamado de shrinking header ou shrink on scroll) em [onde].
O cabeçalho deve ficar no topo e, assim que o leitor rolar um pouco, encolher suavemente para uma barra mais fina com um logo menor, voltando a crescer quando ele retornar ao topo.
Não deixe o conteúdo abaixo pular enquanto o cabeçalho muda de tamanho.Mais em Scroll
Role aqui dentro
Scroll Progress Indicator
Também chamada Reading Progress Bar, Progress Bar
Uma barra ou um anel se preenche conforme o usuário rola a página ou o artigo.
Onde usar
Artigos e páginas longas
Adicione um "Scroll Progress Indicator" (também chamado de reading progress bar) em [onde].
Uma barra fina no topo deve se preencher da esquerda para a direita conforme o leitor rola, chegando à largura total no final.
Ligue-a diretamente à posição de rolagem, sem atraso de suavização, e não deixe que ela cubra o conteúdo.A
B
C
D
Role aqui dentro
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
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.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).