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).
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).
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
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.
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.
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.
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).
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).
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).
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 F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
Role aqui dentro
Também chamada Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity
Grandes linhas de texto deslizam na horizontal enquanto a página rola na vertical.
Onde usar
Mensagens de marca e seções hero
Adicione um "Text Marquee on Scroll" (também chamado de scroll text marquee ou scroll velocity text) em [onde].
Grandes linhas de texto devem deslizar para o lado conforme a página rola para baixo, com linhas alternadas em direções opostas, e voltar ao rolar para cima.
Ligue o movimento à posição de rolagem, não deixe as linhas longas criarem uma barra de rolagem horizontal e mantenha-as paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).
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
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).