3.4Efectos de movimiento y animaciones
Lo esencial en 30 segundos
- Animaciones de entrada: un elemento aparece (fundido, deslizamiento); efectos de desplazamiento (Pro): se mueve al desplazar; pasar el ratón: reacciona al ratón.
- Principio rector: "menos es más" — la animación realza con parquedad, no distrae.
- Demasiadas animaciones ralentizan y molestan (rendimiento, accesibilidad) — sobre todo desplazamiento/ratón.
Hilo conductor — Nadia dosifica los efectos
Tentada por las animaciones, Nadia las pone por todas partes: títulos que vuelan, imágenes en parallax, botones que parpadean. Resultado: la página "se mueve" demasiado, parece lenta y cansa. Hace limpieza: un leve fundido al aparecer las tarjetas, un efecto discreto al pasar el ratón por los botones. Sobrio y nítido.
Continúa 3.3 — realzar sin recargar.
1. Tres familias de efectos
Las animaciones de entrada hacen aparecer un elemento con un efecto (fundido, deslizamiento, zoom) cuando entra en pantalla. Los efectos de desplazamiento (Pro) hacen moverse elementos al desplazar (parallax, traslación). Los efectos de pasar el ratón (hover) reaccionan al paso del ratón (cambio de color, ligera elevación).
Bien dosificados, dan vida y guían el ojo (p. ej. hacer aparecer las tarjetas una a una).
2. Moderación, rendimiento, accesibilidad
El principio rector: "menos es más". Las animaciones realzan con parquedad; en exceso, distraen, dan una impresión de lentitud y pueden molestar la accesibilidad (algunas personas son sensibles al movimiento). Los efectos de desplazamiento y de ratón son los más costosos.
Regla de Nadia: una animación solo si sirve a la lectura; discreta; y comprobada en móvil (donde el desplazamiento animado puede ir lento).
🔎 Ejemplo concreto — Dosificar los efectos (caso Nadia)
Mantener: fundido leve al aparecer las tarjetas (entrada).
Mantener: ligera elevación de los botones al pasar el ratón.
Quitar: parallax en toda la página (pesado).
Quitar: títulos que "vuelan" y botones que parpadean.
→ Comprobar la fluidez en móvil.Resultado: un sitio vivo pero sobrio y fluido.
Lección: "menos es más".
Vocabulario de la sección
- Animaciones de entrada
- Un elemento aparece con un efecto (fundido, deslizamiento, zoom) al entrar en pantalla.
Ejemplo sencillo: las tarjetas de trabajos aparecen con un fundido.
Lo que no es: hacer volar y rebotar cada elemento.
Reflejo: una entrada discreta guía el ojo.
- Efectos de desplazamiento (Pro)
- Elementos que se mueven al desplazar (parallax, traslación).
Ejemplo sencillo: un leve parallax en una sola sección de ambiente.
Lo que no es: parallax por todas partes (pesado, cansino).
Reflejo: desplazamiento animado puntual, nunca por todas partes.
- Efectos de pasar el ratón (hover)
- Cambio al paso del ratón (color, elevación, sombra).
Ejemplo sencillo: botón que se eleva ligeramente al pasar el ratón.
Lo que no es: parpadeos o cambios bruscos.
Reflejo: hover sutil, coherente, sin excesos.
- Moderación ('menos es más')
- Realzar con parquedad: la animación sirve a la lectura, no distrae.
Ejemplo sencillo: 1-2 efectos discretos y útiles.
Lo que no es: apilar animaciones "para parecer moderno".
Reflejo: en la duda, quitar la animación.
- Rendimiento y accesibilidad
- Demasiadas animaciones ralentizan y molestan (sensibilidad al movimiento).
Ejemplo sencillo: comprobar la fluidez en móvil antes de entregar.
Lo que no es: juzgarlo fluido solo en un ordenador potente.
Reflejo: probar los efectos en un móvil real.
En la práctica — Dosificar las animaciones
- Añade una animación de entrada discreta (fundido) a un grupo de tarjetas.
- Añade un efecto de pasar el ratón sutil en los botones (elevación/color).
- Evita el parallax generalizado; resérvalo para una sección fuerte, si es realmente útil.
- Prueba la fluidez en un móvil real y quita lo que vaya lento o distraiga.
Guion listo para decir — justificar la sobriedad de los efectos (20 s)
"He añadido algunas animaciones discretas — los trabajos aparecen con suavidad, los botones reaccionan al pasar el ratón. Evito a propósito los efectos demasiado cargados: ralentizan el sitio y cansan al visitante. El objetivo es un sitio vivo pero rápido y agradable, sobre todo en móvil."
Posicionar la sobriedad como una elección de rendimiento y comodidad.
Plantilla para copiar y pegar — comprobación de animaciones
ANIMACIÓN DE ENTRADA (discreta): _______________
EFECTO DE PASAR EL RATÓN (sutil): _______________
PARALLAX / DESPLAZAMIENTO: ninguno / 1 sección fuerte
EFECTOS ELIMINADOS (exceso): _______________
FLUIDEZ PROBADA EN MÓVIL: sí / noEscaparate sobrio
Un fundido al aparecer, un hover discreto: de sobra suficiente.
Sección de impacto
Un único parallax en la banda, si el rendimiento lo permite.
Móvil
Aligerar los efectos de desplazamiento, a menudo exigentes en pantalla pequeña.
Accesibilidad
Mantenerse discreto: algunas personas son sensibles a las animaciones.
✓ Buenas prácticas
- Aplicar "menos es más".
- Reservar el parallax para una sección, no toda la página.
- Probar la fluidez en móvil.
✗ Errores frecuentes
- Apilar animaciones "para parecer moderno".
- Parallax generalizado (pesado).
- Juzgarlo fluido solo en un buen ordenador.
Puntos clave
- Entrada (aparición), desplazamiento (Pro), pasar el ratón.
- "Menos es más": discreto y útil.
- El exceso ralentiza y molesta la accesibilidad.
- Probar los efectos en un móvil real.
Reto 48h — aplica mañana
Añade un fundido de entrada a unas tarjetas y un hover sutil a los botones, quita todo parallax generalizado, luego comprueba la fluidez en un móvil real. Anota lo que has quitado. 20 minutos.
- Añado animaciones discretas y útiles.
- Evito el parallax generalizado.
- Pruebo la fluidez en móvil.
Preguntas frecuentes
¿Las animaciones ralentizan el sitio?
Pueden hacerlo, sobre todo los efectos de desplazamiento (parallax) y de ratón, en particular en móvil. De ahí el principio "menos es más" y la prueba en un móvil real.
¿Qué animación priorizar para empezar?
Una animación de entrada discreta (fundido) y un efecto de pasar el ratón sutil en los botones bastan para dar vida sin recargar.
¿Las animaciones plantean un problema de accesibilidad?
Un exceso de movimiento puede molestar a personas sensibles. Mantente discreto y evita los efectos agresivos o permanentes.
Nadia ha puesto animaciones por todas partes y la página parece lenta y agitada. ¿Qué principio aplicar?