El efecto parallax es la animación por la que el fondo de una página se mueve más despacio que el texto cuando el visitante hace scroll, y lleva años colándose en la cabecera de webs de despachos que buscan una entrada vistosa.
Antes de pedírselo a tu diseñador conviene saber qué exige la normativa de accesibilidad, qué parte de tus visitantes puede sentirse mal con ese movimiento y qué alternativas logran el mismo efecto de profundidad sin penalizar la velocidad de carga de tu web.
El efecto parallax no es peligroso para la mayoría, pero el W3C obliga a que cualquier animación activada por el scroll se pueda desactivar: el NIDCD estadounidense estima que un 35% de los adultos de más de 40 años ha sufrido algún trastorno vestibular que el movimiento en pantalla puede agravar.
El efecto parallax multiplica las capas de movimiento
Técnicamente, el efecto parallax separa una página en varias capas que se desplazan a velocidades distintas cuando el usuario baja por ella: la imagen de fondo avanza despacio, un elemento intermedio a velocidad media y el texto a la velocidad normal del scroll. Esa diferencia de ritmos es lo que crea la sensación de profundidad, y por eso se usa casi siempre en la cabecera, con una foto del despacho o de la ciudad de fondo.
El coste técnico no es pequeño: cada capa necesita su propia imagen, normalmente grande, y el navegador tiene que recalcular la posición de todas ellas en cada fotograma del scroll. En un móvil de gama media esa cuenta se nota: el desplazamiento se queda a tirones y la página tarda más en responder al dedo del usuario, justo lo contrario de lo que busca quien quiere una web ágil.
Los trastornos vestibulares reaccionan al desplazamiento por capas
El sistema vestibular, en el oído interno, es el que mantiene el equilibrio y le dice al cerebro si el cuerpo se mueve o está quieto. Cuando los ojos ven movimiento pero el oído interno no lo detecta, el cerebro recibe dos señales contradictorias, y en algunas personas esa contradicción se traduce en mareo, náuseas o dolor de cabeza en cuestión de segundos.
Un trastorno vestibular es cualquier alteración del sistema de equilibrio del oído interno que hace que el cerebro reaccione al movimiento visual de forma distinta a la de una persona sin esa alteración.
Los síntomas que describe el NIDCD
El Instituto Nacional de la Sordera y Otros Trastornos de la Comunicación de Estados Unidos (NIDCD) calcula que un 15% de los adultos estadounidenses, unos 33 millones de personas, ha tenido algún problema de equilibrio o mareo, y que la cifra sube al 35% entre los mayores de 40 años. No hace falta que un visitante tenga un diagnóstico: basta con que note vértigo al bajar por una página con parallax para que cierre la pestaña antes de llegar al formulario de contacto. Por eso el estándar no distingue entre discapacidad declarada y sensibilidad puntual: exige que el efecto se pueda apagar para cualquiera que lo pida.
La propiedad prefers-reduced-motion frena la animación
El criterio 2.3.3 Animation from Interactions de las WCAG exige que cualquier animación disparada por una interacción del usuario, como el scroll, se pueda desactivar salvo que sea esencial para el contenido. El parallax casi nunca es esencial: es decoración, así que entra de lleno en ese criterio.
La forma técnica de cumplirlo es una sola línea de CSS. Todo sistema operativo moderno expone un ajuste de «reducir movimiento», y el navegador lo traduce en la variable prefers-reduced-motion: si el visitante la tiene activada, el código del parallax puede detectarlo y mostrar la misma cabecera sin desplazamiento diferencial, con la imagen fija.
Cómo comprobarlo sin tocar una línea de código
Antes de pedirle nada a quien mantiene tu web, puedes comprobar en menos de un minuto si el ajuste ya existe en tu sistema:
- En macOS: Preferencias del Sistema, Accesibilidad, Pantalla, «Reducir movimiento».
- En Windows: Configuración, Accesibilidad, Efectos visuales, «Mostrar animaciones».
- En iOS: Ajustes, Accesibilidad, Movimiento, «Reducir movimiento».
- En Android: Ajustes, Accesibilidad, «Eliminar animaciones».
Con cualquiera de esos ajustes activado, abre la portada de tu despacho desde ese mismo dispositivo. Si la cabecera sigue moviéndose capa por capa al hacer scroll, tu web no respeta la preferencia y conviene pedírselo a quien la mantiene.
Ese parallax no conviene en toda portada
Un despacho que capta la mayoría de sus leads desde el móvil tiene poco que ganar con el parallax y mucho que perder en velocidad. Varias imágenes de fondo en alta resolución compiten por cargar primero, y eso retrasa justo la que decide la nota de Largest Contentful Paint de la portada: la imagen de cabecera, que suele ser la más pesada de toda la página.
Tampoco conviene cuando la cabecera lleva el único botón de contacto visible sin hacer scroll. Si el efecto tarda en asentarse o se mueve mientras el visitante intenta pulsar, el objetivo real de esa sección —que alguien rellene el formulario— pierde frente al adorno. Un despacho que ya sabe que la velocidad de carga decide cuántos leads pierde debería pensarlo dos veces antes de sumar capas de movimiento a su portada.
Qué sustituye esa capa de movimiento en tu cabecera
La sensación de profundidad se puede conseguir sin recalcular posiciones en cada fotograma del scroll. Un degradado oscuro superpuesto a una única fotografía fija, con el titular y el botón de contacto encima, da una cabecera igual de cuidada y no le exige nada al navegador más allá de cargar una imagen.
Una aparición suave del texto al cargar la página —un ligero desplazamiento de unos pocos píxeles con una transición corta— cumple el mismo papel decorativo sin depender del scroll, así que no entra en el criterio de animación por interacción y no hace falta desactivarla para nadie. Una web adaptada de verdad al móvil ya prioriza este tipo de recursos ligeros frente a los que solo lucen en un ordenador de escritorio.
- Vídeo de fondo corto, en bucle, sin controles ni sonido.
- Imagen fija con un degradado y el texto superpuesto.
- Aparición suave del titular al cargar, sin ligar el movimiento al scroll.
Preguntas frecuentes sobre el efecto parallax
¿El efecto parallax perjudica el SEO de mi web?
No de forma directa, pero sí indirectamente: las imágenes de las distintas capas añaden peso y pueden retrasar el Largest Contentful Paint, una de las métricas de Core Web Vitals que Google usa para evaluar la experiencia de la página.
¿Cómo sé si mi web ya tiene parallax activo?
Abre la portada desde el móvil y haz scroll despacio por la cabecera: si la imagen de fondo se mueve a otro ritmo que el texto o los botones, hay parallax. También puedes preguntarlo directamente a quien mantiene tu web.
¿Hay que quitar el parallax si uso Elementor?
No hay que quitarlo, pero sí revisar si respeta la preferencia de movimiento reducido: Elementor permite activar y desactivar el efecto por sección, así que se puede sustituir solo en la cabecera sin tocar el resto de la página.
¿Hace falta programar algo para desactivarlo?
Si el tema o el constructor ya soporta la preferencia de movimiento reducido, no: basta con activarla en el sistema del visitante. Si no la soporta, sí hace falta añadir una regla de CSS que detecte esa preferencia y anule la animación.
Fuente: NIDCD (National Institute on Deafness and Other Communication Disorders)