Smooth Scroll (rolagem suave)

A rolagem se encaixa em pontos definidos, como slides ou seções.

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.

Camadas se movem em velocidades diferentes conforme a rolagem, criando sensação de profundidade.

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).

Os cards ficam fixos no topo durante a rolagem e se empilham uns sobre os outros, muitas vezes encolhendo os anteriores.

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.

Um cabeçalho fixo diminui de altura ou tamanho depois que o usuário rola para baixo.

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.

Grandes linhas de texto deslizam na horizontal enquanto a página rola na vertical.

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).