Parallax y animaciones: cuándo suman y cuándo estorban

Ni pecado ni adorno

Hay dos posturas cómodas y las dos son perezosas. Una dice que las animaciones son postureo que ralentiza. La otra las mete en todas las secciones porque quedan modernas.

La postura útil es intermedia: el movimiento es una herramienta de comunicación con un coste técnico concreto. Como cualquier herramienta, se usa cuando el beneficio supera al coste, y para eso hay que conocer ambos.

Qué aporta el movimiento cuando está bien puesto

Jerarquía

Guía la mirada hacia lo que importa primero. En una pantalla llena de elementos, lo que se mueve gana la atención; conviene que sea lo que quieres que lean.

Continuidad

Una transición entre dos estados explica de dónde viene lo que aparece. Sin ella, los elementos surgen de la nada y el usuario tiene que reorientarse.

Explicación

Es el uso más valioso y el menos frecuente. Un proceso, un antes y un después, cómo encajan las piezas de un producto: hay ideas que en movimiento se entienden en tres segundos y en texto necesitan un párrafo.

Respuesta

Confirmar que un botón recibió el clic, que algo se está enviando, que la acción funcionó. Es la animación más humilde y la que más frustración evita.

Lo que cuesta de verdad

Aquí va un ejemplo propio, porque predicar con la casa desordenada tiene poco valor. Al auditar nuestra web medimos las dos secuencias animadas del inicio: sumaban cerca de 14 MB de imágenes en escritorio repartidas en 200 fotogramas. El código estaba bien escrito y la carga era progresiva, pero el volumen de material era desproporcionado para lo que aportaba.

Revisamos la compresión de cada fotograma comparando calidades sobre imágenes reales y recortamos alrededor de un 30 % sin pérdida visible. Seguimos trabajando en reducirlo más. Contamos esto para ilustrar el punto: una animación puede estar bien programada y aun así ser cara.

El coste tiene cuatro caras:

• Peso de descarga. Un presupuesto razonable para una página completa está entre 1 y 2 MB. Una secuencia de fotogramas se lo come entero sin despeinarse.
• Memoria. Una imagen de 1920×1080 descomprimida ocupa unos 8 MB en memoria, pese a pesar 40 KB en disco. Retener muchas a la vez puede hacer que el navegador cierre la pestaña en un móvil de gama media.
• Procesador y batería. Animar propiedades que obligan a recalcular el diseño de la página produce tirones perceptibles y calienta el dispositivo.
• Atención. El coste que nadie mide. Demasiado movimiento cansa y hace que la gente se salte contenido para escapar.

La pregunta no es «¿queda bien?». Es «¿queda bien en un móvil de hace tres años con mala cobertura?».

Accesibilidad: esto no se negocia

Para algunas personas el movimiento en pantalla no es una preferencia estética: provoca mareo, náuseas o migraña. Los sistemas operativos permiten indicarlo con una opción llamada «reducir movimiento», y el navegador la comunica a la web.

Una web bien hecha detecta esa señal y sirve una versión estática equivalente, sin perder información. No consiste en desactivar la animación y dejar una pantalla vacía: consiste en que el contenido siga contándose.

Además del movimiento, conviene revisar que nada dependa solo de la animación para entenderse, que el contenido esté en el HTML y no aparezca únicamente por JavaScript, y que se pueda navegar con teclado.

Siete reglas prácticas

1. Anima opacidad y transformaciones. Son las operaciones que el navegador resuelve barato.
2. Corto. Entre 150 y 400 ms para microinteracciones. Por encima de medio segundo, la interfaz se siente lenta.
3. Una idea por sección. Si tres cosas se mueven a la vez, ninguna destaca.
4. Móvil primero, y con menos. Servir la misma secuencia pesada a un teléfono es la causa más común de webs animadas que van mal.
5. Nada que bloquee la primera impresión. El titular y la llamada a la acción deben poder leerse antes de que cargue el espectáculo.
6. Respeta la preferencia de movimiento reducido siempre.
7. Mídelo en un dispositivo real, no en el portátil del diseñador conectado por fibra.

Cuándo no animar

• Cuando el objetivo de la página es que alguien complete una acción rápido: un formulario, un pago, una reserva.
• Cuando el público usa mayoritariamente móviles modestos o conexiones inestables.
• Cuando la animación tapa contenido que la gente busca.
• Cuando se usa para rellenar una sección que no tiene nada que decir. Ahí falta contenido, no movimiento.
• Cuando no hay presupuesto para hacerlo bien. Un parallax barato se nota más que no tenerlo.

Cómo saber si la tuya sobra

Cuatro comprobaciones que puedes hacer hoy mismo:

1. Abre tu web en un móvil con datos, no con wifi. Cronometra hasta que puedas leer el titular.
2. Mira el peso total de la página en las herramientas de desarrollo del navegador. Si supera 3 MB, hay algo que revisar.
3. Activa «reducir movimiento» en tu sistema y recarga. Si la web se rompe o se queda en blanco, hay un fallo de accesibilidad.
4. Enséñasela a alguien treinta segundos y pregúntale qué vendes. Si no lo sabe, el movimiento no está explicando nada.

Si las cuatro salen bien y aun así no llegan consultas, el problema no está en la animación: repasa las seis razones por las que una web no genera clientes.

Nuestra posición

Trabajamos con animaciones y parallax porque, bien usados, diferencian una marca y explican propuestas que en texto plano se quedan cortas. Pero el criterio va antes que el efecto: si el movimiento no explica nada, sobra. Y cuando lo usamos, se adapta por dispositivo y respeta la preferencia de movimiento reducido.

Si tu web actual va lenta y sospechas que la culpa está aquí, el diagnóstico incluye una revisión de este punto.