Animaciones
Animaciones al pasar el mouse
La pieza reacciona cuando el mouse está encima: se levanta, crece, brilla o se inclina.
Son once y todas son cortas (de 0,15 a 0,3 segundos). Funcionan donde hay mouse: en el celular no se ven, así que no pongas ahí nada importante.
Las 11 de hover
- Levantar
- La pieza sube un poquito, como si se despegara de la página.
- Agrandar
- Crece un poco.
- Brillo
- Se ilumina apenas. No se mueve.
- Inclinar
- Gira unos grados.
- Hundir
- Se achica apenas y baja un pelito, como un botón apretado.
- Brillo fuerte
- Se ilumina bastante más que Brillo. No se mueve.
- Sombra
- Aparece una sombra debajo, como si se elevara. No se mueve.
- Mover a la derecha
- Se corre unos píxeles a la derecha. Va bien con flechas y links.
- Girar un poco
- Gira unos grados para el otro lado que Inclinar.
- Achicar
- Se encoge un poco.
- Atenuar
- Se pone un poco transparente. No se mueve.
Elegí la tarjeta, el botón o la imagen.
Abrí la pestaña Interacciones y tocá + Agregar interacción.
Elegí Al pasar el mouse y Animación de la galería.
Tocá la que quieras y cerrá con Listo.
Para probarla de verdad, abrí la vista previa y pasá el mouse.
Ejemplo
Una tarjeta que se agranda al pasar el mouse
Elegí la tarjeta de un producto y aplicale Agrandar. En una lista o carrusel, es una sola tarjeta que se repite: el efecto queda en todas.