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).
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Desplázate dentro
También llamado Scroll Text Reveal, Word-by-word Reveal
Las palabras de un párrafo pasan de atenuadas a opacidad total a medida que el usuario hace scroll.
Se usa en
Párrafos de manifiesto o de introducción
Añade un efecto "Text Reveal" (también llamado scroll text reveal o word-by-word reveal) en [dónde].
El párrafo debe empezar atenuado y, a medida que el usuario hace scroll, cada palabra debe iluminarse del todo una tras otra, vinculada a la posición del scroll.
Al volver a subir, las palabras deben atenuarse de nuevo, y el párrafo completo debe seguir disponible para los lectores de pantalla sea cual sea su atenuación.
También llamado On-Scroll Sliced Text
Un título se corta en franjas horizontales que se desplazan de lado unas contra otras al hacer scroll.
Añade un efecto "Sliced Text" (también llamado on-scroll sliced text) en [dónde].
Un título grande debe cortarse en franjas horizontales que se deslizan de lado unas contra otras al hacer scroll, alineadas formando la palabra completa al principio.
Liga el desplazamiento directamente a la posición del scroll para que al volver se invierta, y mantén el título como un solo texto legible para los lectores de pantalla.