Text Path Scroll

Um elemento percorre um caminho curvo personalizado e pode girar para acompanhá-lo.

Adicione uma animação "Motion Path" (também chamada animate along path) em [onde].
Um elemento pequeno deve percorrer uma rota curva personalizada em ritmo lento e constante, girando para ficar de frente para a direção em que se move.
Use uma rota fechada para o loop se repetir sem saltos, e faça a rota se ajustar ao contêiner em vez de ficar com tamanho fixo.

O texto fica disposto em volta de um círculo que gira sem parar.

Adicione "Spinning Text" (também chamado circular text ou text on circle) em [onde].
As letras devem ficar espaçadas de forma uniforme em volta de um círculo que gira devagar e de forma constante, sem salto quando o loop recomeça.
Entregue o texto aos leitores de tela uma única vez como texto normal e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).

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

Uma palavra é duplicada em várias cópias empilhadas que se deslocam com a rolagem.

Adicione um efeito "Text Repetition" (também chamado de repeated text scroll) em [onde].
Uma palavra deve ser copiada em uma pilha de cópias em contorno mais apagadas que se abrem por trás dela conforme o usuário rola, e se fecham de novo ao rolar para cima.
Vincule a abertura diretamente à posição de rolagem e esconda as cópias extras dos leitores de tela para que a palavra seja lida só uma vez.

O texto existente sai com uma animação e é substituído por um novo conteúdo.

Adicione um efeito "Text Replacement" (também chamado de text swap) em [onde].
Quando o texto mudar, os caracteres antigos devem deslizar para cima e sair enquanto os novos entram por baixo, um caractere após o outro, em uma onda rápida e suave.
Evite que a caixa de texto mude de tamanho bruscamente durante a troca e anuncie só o texto novo aos leitores de tela.

As palavras de um parágrafo passam de apagadas para opacidade total conforme o usuário rola.

Adicione um efeito "Text Reveal" (também chamado de scroll text reveal ou word-by-word reveal) em [onde].
O parágrafo deve começar apagado e, conforme o usuário rola, cada palavra deve clarear até a intensidade total, uma após a outra, vinculada à posição de rolagem.
Ao rolar de volta para cima, as palavras devem apagar de novo, e o parágrafo inteiro deve continuar disponível para leitores de tela, qualquer que seja o esmaecimento.