Animaciones de ratón
Las animaciones de ratón hacen que un elemento se incline, se desplace o se ladee en 3D mientras el puntero se mueve sobre él, volviendo suavemente a su posición de reposo en cuanto el puntero sale. En la práctica son solo para escritorio — no hay posición de puntero que seguir en una pantalla táctil.
Necesita que el módulo Mouse esté activado en Animation settings primero. Sin eso, las clases no hacen nada en absoluto.
Míralo en acción: Mouse animations en fancyanimations.com.
Animaciones
| Animación | Efecto |
|---|---|
| Mouse follow | Se mueve hacia el puntero (aproximadamente un cuarto de la distancia desde el centro del elemento) y se inclina ligeramente |
| Mouse move | El mismo movimiento, sin rotación |
| 3D tilt | Se inclina en 3D siguiendo al puntero — el plugin lo envuelve automáticamente en un contenedor con perspectiva |
| Bounce (add-on) | Una transición con rebote y con overshoot — combínala con uno de los efectos de arriba |
| Inner layer (en un hijo de un elemento con 3D tilt) | Hace flotar a ese hijo hacia delante, dando sensación de profundidad |
Usa solo uno de Follow / Move / 3D tilt por elemento. Queda bien en imágenes de hero, formas decorativas y tarjetas; evítalo en texto plano o en secciones enteras llenas de contenido — a esa escala se percibe como ruido visual.
Para desarrolladores: CSS que puedes ajustar
El runtime escribe continuamente --fa-mouse-x, --fa-mouse-y (y --fa-mouse-r para Follow);
sobrescribe los factores de intensidad con un selector un poco más fuerte que la clase simple:
.hero-shape.fa--mouse-move {
--fa-factor-x: calc(0.1 * 1px);
--fa-factor-y: calc(0.1 * 1px);
}
Una tarjeta 3D con una capa que flota por encima:
div.card 3D tilt
img Inner layer
h3
- Bricks
- Etch
- Gutenberg
Pestaña Style → Mouse Animations: elige Follow, Move o 3D tilt, y opcionalmente "Bounce" y, en un elemento hijo, "I am inner" para el efecto de capa flotante. Las sobrescrituras de factor van en el CSS personalizado del elemento.
El panel Mouse Animations en Bricks.
Añade las clases desde el panel Fancy → Mouse. Las sobrescrituras de factor encajan directamente
en el atributo style del elemento.
Con el módulo Mouse activado, el panel Mouse Animations de la barra lateral del bloque tiene la misma elección entre Follow/Move/3D tilt, más Bounce y el interruptor de la capa interior.
Problemas comunes
- Una animación de entrada, de scroll o una transformación propia deja de funcionar de repente
en ese elemento. Las animaciones de ratón fijan
transform(y sus propias transiciones) directamente, sobrescribiendo cualquier otra cosa que también estuviera escribiendotransform. Pon el efecto de ratón en un wrapper o en un hijo en su lugar. - Un layout de grid o flex se rompe específicamente en un elemento con 3D tilt. El plugin envuelve ese elemento en su propio contenedor para conseguir la perspectiva correcta, lo que lo saca de ser un hijo directo del padre grid/flex. Pon la clase 3D tilt en algo dentro del elemento de la cuadrícula, en vez de en el propio elemento de la cuadrícula.
- La capa interior flotante no sobresale visiblemente. Debe ser un hijo directo del elemento con 3D tilt, o si no, todos los elementos intermedios también necesitan tener las transformaciones 3D preservadas.
- Pasar el cursor por el elemento se salta su animación de entrada. Entrar en un elemento que también tiene una animación de entrada detiene esa animación y la muestra ya terminada. Pon la entrada en un wrapper y el efecto de ratón en el hijo.