Before-After Slider
También llamado Image comparison slider, Compare slider
Un divisor arrastrable muestra una imagen a un lado y otra al otro.
Se usa en
Retoque fotográfico, comparativas de productos
Variantes
- horizontal
- vertical
- hover-controlled
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 "Before-After Slider" (también llamado image comparison slider o compare slider) en [dónde].
Dos imágenes quedan superpuestas y, al arrastrar un divisor vertical, se ve más de una y menos de la otra; el divisor sigue al cursor directamente, sin retraso.
Empieza con el divisor en el centro y haz que funcione con el tacto y con las flechas del teclado.Animaciones parecidas
Desplázate dentro
Image Reveal Wipe
También llamado Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
Una imagen queda al descubierto cuando una cubierta se encoge o el borde de una máscara se expande.
Se usa en
Imágenes editoriales al hacer scroll
Añade un "Image Reveal Wipe" (también llamado mask reveal o clip-path reveal) en [dónde].
Cuando la imagen entre en pantalla al hacer scroll, una cubierta debe retirarse desde un lado y descubrirla con suavidad al ritmo del scroll, de modo que quede totalmente visible mucho antes de salir de la pantalla.
Reserva el espacio de la imagen para que el diseño no salte y muestra la imagen totalmente descubierta si el usuario prefiere movimiento reducido (prefers-reduced-motion).ABCDEFGHIJKL
Mueve el puntero aquí
Text Reveal Card
También llamado Spotlight Text Reveal
Al mover el puntero sobre una tarjeta se descubre un texto oculto bajo un borde de máscara o un foco de luz.
Se usa en
Tarjetas de funciones
Añade un efecto "Text Reveal Card" (también llamado spotlight text reveal) en [dónde].
Al mover el puntero por la tarjeta, un borde vertical debe seguirlo de cerca y descubrir un texto oculto en uno de sus lados, suave y directo, sin retraso.
En pantallas táctiles, donde no hay puntero que seguir, deja que un arrastre o un toque revele el texto oculto, y haz que ese texto esté disponible para los lectores de pantalla.A
Pasa el ratón por encima
SVG Mask Reveal
También llamado SVG Mask Effect, Clip-path Reveal, Spotlight Mask
Una forma de máscara barre o sigue al puntero para descubrir el contenido de debajo.
Se usa en
Revelado de imágenes y contenido
Añade un efecto hover "SVG Mask Reveal" (también llamado clip-path reveal o spotlight mask) en [dónde].
Mientras el puntero esté encima, una máscara circular debe crecer desde el centro y descubrir el contenido de debajo, y volver a cerrarse cuando el puntero se va: suave y bastante rápido.
Mantén las dos capas exactamente del mismo tamaño para que nada se mueva, y muestra el mismo revelado con el foco del teclado y al tocar.A
Arrastra
Drag (arrastrar)
También llamado Draggable, Drag constraints
Un elemento sigue al cursor al arrastrarlo y puede limitarse a un área o a un eje.
Se usa en
Sliders, tarjetas ordenables
Añade una interacción de arrastrar (Drag) en [dónde], también llamada draggable o drag constraints.
El elemento debe seguir al cursor directamente mientras se arrastra, detenerse en los bordes de su área permitida y volver a su posición de reposo con un pequeño rebote al soltarlo.
Haz que funcione tanto con toque como con ratón sin que la página se desplace debajo, y ofrece una forma de moverlo con el teclado.Más en Image & Media
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.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).