Parallax

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.

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

Um elemento ou uma cena aumenta ou diminui conforme o usuário rola a página.

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

Uma imagem estática aproxima e se desloca lentamente dentro da moldura.

Adicione um "Ken Burns Effect" (também chamado slow pan and zoom) em [onde].
Enquanto cada imagem é exibida, ela deve aproximar e se deslocar bem devagar em uma única direção, depois fazer um crossfade para a próxima imagem, que se move em outra direção: calmo e contínuo.
Faça cada imagem cobrir toda a moldura o tempo todo para nenhuma borda aparecer, e deixe as imagens paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).

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.

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.

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.