Zoom on Scroll
También llamado Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
Un elemento o una escena se amplía o se reduce a medida que el usuario hace scroll.
Se usa en
Intros de hero y ampliación de imágenes
Variantes
- zoom in
- zoom out
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 un efecto "Zoom on Scroll" (también llamado scroll zoom o scale on scroll) en [dónde].
Mientras la sección se mantiene en pantalla, el elemento debe crecer suavemente desde una tarjeta pequeña hasta llenar toda la vista, al ritmo del scroll, y encogerse de nuevo al subir.
Escálalo sin desplazar el diseño que lo rodea y muéstralo en su tamaño final sin zoom si el usuario prefiere movimiento reducido (prefers-reduced-motion).Animaciones parecidas
Ken Burns Effect
También llamado Slow pan and zoom, Ken Burns, Kenburns
Una imagen fija hace zoom y se desplaza lentamente dentro de su marco.
Se usa en
Presentaciones de hero, fondos
Añade un "Ken Burns Effect" (también llamado slow pan and zoom) en [dónde].
Mientras se muestra cada imagen, debe hacer zoom y desplazarse muy despacio en una sola dirección, y luego fundirse con la siguiente imagen, que se mueve en otra dirección: tranquilo y continuo.
Haz que cada imagen cubra todo su marco en todo momento para que nunca se vea un borde, y deja las imágenes quietas si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Desplázate dentro
Scroll-Linked Animation
También llamado Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
El progreso de la animación está ligado directamente a la posición del scroll, así que al avanzar o retroceder se reproduce o se rebobina.
Se usa en
Páginas narrativas y efectos de progreso
Añade una "Scroll-Linked Animation" (también llamada scroll-driven animation o scroll scrub) en [dónde].
La animación debe moverse exactamente con la posición del scroll: al bajar avanza y al subir se rebobina al instante, sin un suavizado temporal propio.
Asigna toda la animación a un tramo de scroll claro y muestra un estado estático razonable si el usuario prefiere movimiento reducido (prefers-reduced-motion).Pasa el ratón por encima
Hover Zoom
También llamado Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
Una imagen se amplía dentro de su marco al pasar el cursor y a veces se desplaza con él.
Se usa en
Tarjetas de producto, miniaturas
Añade un efecto "Hover Zoom" (también llamado image zoom on hover o zoom-pan) en [dónde].
Mientras el cursor esté sobre la imagen, debe ampliarse lenta y suavemente dentro de su marco sin que el marco cambie de tamaño, y volver con suavidad cuando el cursor sale.
Recorta la imagen a su marco para que nada se salga del diseño y muestra el mismo zoom con el foco del teclado.A
B
C
D
Desplázate dentro
Parallax
También llamado Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
Las capas se mueven a distintas velocidades respecto al scroll para crear sensación de profundidad.
Se usa en
Fondos de hero, landing pages
Añade un efecto de scroll "Parallax" (también llamado parallax scrolling o parallax layers) en [dónde].
Las capas de fondo deben moverse más despacio que el contenido al hacer scroll, y la más lejana, menos que ninguna, para dar una sutil sensación de profundidad.
Mantenlo ligado a la posición del scroll sin retraso, deja el texto en la capa de velocidad normal, y desactiva el efecto si el usuario prefiere movimiento reducido (prefers-reduced-motion).Más en Scroll
Desplázate dentro
Hide on Scroll Header
También llamado Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation
Un encabezado se oculta al hacer scroll hacia abajo y vuelve a aparecer al hacer scroll hacia arriba.
Se usa en
Barras de navegación en móvil y páginas largas
Añade un "Hide on Scroll Header" (también llamado headroom o auto-hide navbar) en [dónde].
El encabezado debe deslizarse hacia arriba y ocultarse cuando el lector hace scroll hacia abajo, y volver a entrar con cualquier scroll hacia arriba: rápido y suave, reaccionando a la dirección y no a la distancia.
Muéstralo siempre en la parte superior de la página, ignora los pequeños temblores del scroll, y mantenlo visible mientras algo dentro de él tenga el foco del teclado.A
B
C
D
E
Desplázate dentro
Horizontal Scroll Section
También llamado Horizontal Scrolling, Scroll-jacked Horizontal Gallery
El scroll vertical desplaza de lado una fila de paneles fijada en pantalla.
Se usa en
Galerías, portafolios, líneas de tiempo
Añade una "Horizontal Scroll Section" (también llamada horizontal scrolling o scroll-jacked horizontal gallery) en [dónde].
Cuando la sección llegue arriba, debe quedarse fijada mientras el scroll hacia abajo desplaza su fila de paneles de lado, y soltarse cuando el último panel esté a la vista.
Vincula el movimiento lateral directamente a la posición del scroll para que al volver atrás se invierta, y usa una fila normal deslizable en pantallas pequeñas o si el usuario prefiere movimiento reducido (prefers-reduced-motion).