También llamado Animate Along Path, Offset Path Animation
Un elemento recorre una trayectoria curva personalizada y puede girar para seguirla.
Se usa en
Aviones o puntos sobre una ruta y viajeros decorativos
Añade una animación "Motion Path" (también llamada animate along path) en [dónde].
Un elemento pequeño debe recorrer una ruta curva personalizada a un ritmo lento y constante, girando para mirar hacia donde avanza.
Usa una ruta cerrada para que el bucle se repita sin saltos, y haz que la ruta se adapte al tamaño de su contenedor en lugar de quedarse con un tamaño fijo.
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
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).
También llamado Swirling particles
Las partículas giran en espiral alrededor de un centro como un remolino.
Se usa en
Fondos de hero impactantes
Añade un fondo "Vortex" (también llamado swirling particles) en [dónde].
Partículas pequeñas deben girar en espiral hacia dentro alrededor de un punto central como un remolino, apareciendo en el borde y desvaneciéndose al llegar al centro, en un giro fluido y continuo.
Usa una cantidad moderada de partículas, páusalo cuando esté fuera de pantalla y detén el giro si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamado Interactive globe
Una Tierra 3D giratoria con marcadores o arcos se integra en el diseño.
Se usa en
Visuales de alcance global
Añade un globo 3D ("3D Globe", también llamado interactive globe) en [dónde].
Un globo con algunos marcadores en su superficie debe girar lenta y constantemente sobre su eje, con los marcadores girando con él: tranquilo y continuo.
Mantenlo decorativo con una alternativa de texto para la información que muestra, páusalo cuando esté fuera de pantalla y detén la rotación si el usuario prefiere movimiento reducido (prefers-reduced-motion).