Horizontal Scroll Section (rolagem horizontal)

Os slides passam na horizontal por uma área visível, encaixando um item de cada vez.

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.

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

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.

Um elemento fica travado no lugar durante um trecho da rolagem enquanto o restante do conteúdo ou a animação avança.

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.

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

Uma barra ou um anel se preenche conforme o usuário rola a página ou o artigo.

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.