Spinning Text
También llamado Circular Text, Text on Circle
El texto se dispone alrededor de un círculo que gira sin parar.
Se usa en
Insignias giratorias y sellos
Variantes
- clockwise
- counter-clockwise
Prompt
Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.
Añade "Spinning Text" (también llamado circular text o text on circle) en [dónde].
Las letras deben repartirse de forma uniforme alrededor de un círculo que gira lento y constante, sin salto cuando el bucle vuelve a empezar.
Da el texto a los lectores de pantalla una sola vez como texto normal y detén la rotación si el usuario prefiere movimiento reducido (prefers-reduced-motion).Animaciones parecidas
Spin
También llamado Rotate Loop, Spinner
El elemento gira sin parar a velocidad constante.
Se usa en
Indicadores de carga (spinners)
Añade un efecto "Spin" (también llamado spinner o rotate loop) en [dónde].
El elemento debe girar sin parar a una velocidad constante y uniforme, sin easing entre vueltas.
Haz que el bucle no tenga cortes, dale al spinner una etiqueta de carga accesible, y ralentízalo o detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Orbiting Circles
También llamado Orbit Animation, Orbit, Orbiting icons
Círculos o iconos pequeños giran alrededor de un centro en órbitas circulares.
Se usa en
Diagramas de integraciones
Añade "Orbiting Circles" (también llamado orbit animation u orbiting icons) en [dónde].
Unos círculos pequeños deben girar lenta y constantemente alrededor de un elemento central en anillos circulares, con el anillo exterior girando en sentido contrario y más despacio.
Mantén el bucle sin cortes y los elementos en órbita siempre derechos, y detén la rotación si el usuario prefiere movimiento reducido (prefers-reduced-motion).Desplázate dentro
Text Path Scroll
También llamado Text Path Curve Scroll Animation
El texto sigue una trayectoria curva y avanza por ella a medida que el usuario hace scroll.
Se usa en
Secciones narrativas
Añade un efecto "Text Path Scroll" (también llamado text path curve scroll animation) en [dónde].
El texto debe apoyarse en una línea curva y deslizarse por ella a medida que el usuario hace scroll, avanzando al bajar y retrocediendo al subir.
Vincula el movimiento directamente a la posición del scroll sin retraso y mantén el texto legible como texto normal para los lectores de pantalla.Más en Text
ABCDEF
Split Text Stagger
También llamado Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
Un título se divide en caracteres, palabras o líneas que se animan una tras otra con un pequeño retraso.
Se usa en
Titulares y títulos de sección
Añade una entrada "Split Text Stagger" (también llamada letter stagger o staggered text reveal) en [dónde].
Divide el título en letras que suban y aparezcan una tras otra con un breve retraso entre ellas, rápido y suave, sin rebote.
Reprodúcela una sola vez cuando el título entre en pantalla, haz que los lectores de pantalla lo lean como una sola palabra y muéstralo sin movimiento si el usuario prefiere movimiento reducido (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
También llamado Text Flipping Board, Flip Board, Vestaboard display
Los caracteres giran como en un panel de salidas de aeropuerto hasta quedarse en la letra final.
Se usa en
Paneles de estado y pantallas retro
Añade un efecto "Split-Flap Text" (también llamado text flipping board o flip board) en [dónde].
Cada casilla de carácter debe pasar rápidamente por el alfabeto hasta quedarse en su letra final, y las casillas deben ir asentándose una tras otra de izquierda a derecha.
Ejecútalo una vez cada vez que el texto aparezca o cambie, anuncia solo el texto final a los lectores de pantalla y muestra el texto final sin giros si el usuario prefiere movimiento reducido (prefers-reduced-motion).ABCDEF
Squiggly Text
También llamado Wobbly Text, Turbulence Text
Los bordes de las letras ondulan como si estuvieran dibujados a mano, con un filtro de desplazamiento SVG.
Se usa en
Títulos con estilo boceto o desenfadados
Añade un efecto "Squiggly Text" (también llamado wobbly text o turbulence text) en [dónde].
Los bordes de las letras deben temblar ligeramente como si se dibujaran a mano y se redibujaran varias veces por segundo: un hervor sutil y nervioso, no una onda suave.
Mantén el texto legible y déjalo quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).