Spinning Text
Também chamada Circular Text, Text on Circle
O texto fica disposto em volta de um círculo que gira sem parar.
Onde usar
Selos e badges giratórios
Variações
- clockwise
- counter-clockwise
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
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).Animações parecidas
Spin
Também chamada Rotate Loop, Spinner
O elemento gira continuamente em velocidade constante.
Onde usar
Indicadores de carregamento (spinners)
Adicione um efeito "Spin" (também chamado spinner ou rotate loop) em [onde].
O elemento deve girar continuamente em uma velocidade constante e uniforme, sem easing entre as voltas.
Deixe o loop contínuo, dê ao spinner um rótulo de carregamento acessível, e desacelere ou pare se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Orbiting Circles
Também chamada Orbit Animation, Orbit, Orbiting icons
Pequenos círculos ou ícones giram em torno de um centro em órbitas circulares.
Onde usar
Diagramas de integrações
Adicione "Orbiting Circles" (também chamado orbit animation ou orbiting icons) em [onde].
Pequenos círculos devem girar devagar e de forma constante em volta de um elemento central em anéis circulares, com o anel externo girando no sentido contrário e mais devagar.
Mantenha o loop contínuo e os itens em órbita sempre em pé, e pare a rotação se o usuário preferir movimento reduzido (prefers-reduced-motion).Role aqui dentro
Text Path Scroll
Também chamada Text Path Curve Scroll Animation
O texto segue um caminho curvo e percorre esse caminho conforme o usuário rola a página.
Onde usar
Seções de storytelling
Adicione um efeito "Text Path Scroll" (também chamado de text path curve scroll animation) em [onde].
O texto deve ficar sobre uma linha curva e deslizar por ela conforme o usuário rola, avançando ao rolar para baixo e voltando ao rolar para cima.
Vincule o movimento diretamente à posição de rolagem, sem atraso, e mantenha o texto legível como texto comum para leitores de tela.Mais em Text
ABCDEF
Split Text Stagger
Também chamada Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
Um título é dividido em caracteres, palavras ou linhas que se animam um após o outro com um pequeno atraso.
Onde usar
Manchetes e títulos de seção
Adicione uma entrada "Split Text Stagger" (também chamada letter stagger ou staggered text reveal) em [onde].
Divida o título em letras que sobem e aparecem uma após a outra com um atraso curto entre elas, rápido e suave, sem quique.
Reproduza só uma vez quando o título entrar na tela, faça os leitores de tela lerem como uma única palavra e mostre sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text
Também chamada Text Flipping Board, Flip Board, Vestaboard display
Os caracteres viram como em um painel de partidas de aeroporto até parar na letra final.
Onde usar
Painéis de status e displays retrô
Adicione um efeito "Split-Flap Text" (também chamado text flipping board ou flip board) em [onde].
Cada casa de caractere deve virar rapidamente pelo alfabeto até parar na letra final, com as casas se fixando uma após a outra da esquerda para a direita.
Execute uma vez sempre que o texto aparecer ou mudar, anuncie só o texto final aos leitores de tela e mostre o texto final sem virar se o usuário preferir movimento reduzido (prefers-reduced-motion).ABCDEF
Squiggly Text
Também chamada Wobbly Text, Turbulence Text
As bordas das letras tremem como se fossem desenhadas à mão, usando um filtro de deslocamento SVG.
Onde usar
Títulos com cara de rascunho ou divertidos
Adicione um efeito "Squiggly Text" (também chamado wobbly text ou turbulence text) em [onde].
As bordas das letras devem tremer levemente, como se fossem desenhadas à mão e redesenhadas várias vezes por segundo: uma fervura sutil e nervosa, não uma onda suave.
Mantenha o texto legível e deixe-o parado se o usuário preferir movimento reduzido (prefers-reduced-motion).