≡En resumen
- El parallax mueve el fondo más despacio que el contenido al hacer scroll para simular profundidad.
- Hoy se puede hacer con CSS moderno o con JavaScript, animando solo transform y opacity para no penalizar el rendimiento.
- Debe respetar prefers-reduced-motion: para personas con trastornos vestibulares puede causar mareo.
- Las webs de una sola página con parallax suelen posicionar peor porque concentran todos los temas en una URL.
- Es un recurso narrativo puntual, no una forma de construir toda la web.
01 ¿Qué es el efecto parallax?
El nombre viene de paralaje, el cambio aparente de posición de un objeto cuando se observa desde puntos distintos: por eso, desde un tren, las montañas lejanas parecen moverse más despacio que los postes cercanos. La animación tradicional lo imitó con la cámara multiplano, usada desde los años 30 para filmar varias capas de dibujos a distinta distancia. Los videojuegos lo llevaron a la pantalla: Moon Patrol (1982) se considera el título que lo popularizó, con tres capas de fondo a velocidades distintas.
En la web aparecieron las primeras implementaciones hacia 2007-2008 y el efecto se puso de moda a principios de la década de 2010, sobre todo en webs de una sola página, presentaciones de producto y relatos interactivos.
02 Tipos de efecto parallax
Fondo fijo
La imagen de fondo queda quieta y el contenido pasa por encima. Es la versión más sencilla y a menudo se llama parallax aunque solo hay una capa en movimiento.
Capas a distinta velocidad
Fondo, capas intermedias y primer plano avanzan a ritmos diferentes. Es el parallax clásico y el que más profundidad transmite.
Parallax horizontal
El scroll vertical mueve escenas de lado, como en un videojuego de plataformas. Muy vistoso, pero rompe la forma natural de navegar.
Parallax por ratón o inclinación
Las capas reaccionan al movimiento del cursor o del móvil en lugar de al scroll.
Revelados al hacer scroll
Elementos que aparecen, se desplazan o cambian de escala al entrar en pantalla. Técnicamente son animaciones vinculadas al scroll.
03 Cómo hacer un efecto parallax: CSS, JavaScript y constructores
| Técnica | Cómo funciona | A favor | En contra |
|---|---|---|---|
| CSS background-attachment: fixed | Fija la imagen de fondo respecto a la ventana | Una línea de CSS | Solo un fondo fijo; algunos navegadores móviles lo ignoran |
| CSS 3D (perspective y translateZ) | Coloca capas a distinta profundidad dentro de un contenedor con perspectiva | Sin JavaScript y fluido | Obliga a un contenedor de scroll propio y es delicado de mantener |
| Animaciones vinculadas al scroll en CSS | animation-timeline con scroll() o view() enlaza una animación al avance del scroll | Declarativo y sin escuchar eventos | Según MDN aún no es Baseline: úsalo como mejora progresiva |
| JavaScript | Calcula la posición en cada fotograma con requestAnimationFrame o librerías como GSAP ScrollTrigger | Control total y compatibilidad amplia | Más código y riesgo de tirones si se programa mal |
| Constructores y temas de WordPress | Opciones de efectos de movimiento o fondos parallax en el editor | Sin programar | Suelen cargar scripts extra en todas las páginas |
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .capa-fondo { animation: desplazar linear both; animation-timeline: view(); } }}@keyframes desplazar { from { transform: translateY(-15%); } to { transform: translateY(15%); } }
Si el navegador no soporta la función o el usuario ha pedido reducir el movimiento, la imagen simplemente se queda quieta: la página sigue funcionando igual. Para más detalle sobre propiedades como transform, consulta la entrada de CSS.
Si quieres ver otras formas de conseguirlo paso a paso, esta guía explica el efecto parallax y cómo puede conseguirse con distintas técnicas.
04 Parallax y rendimiento: cómo evitar que la web vaya a tirones
El parallax mal programado es una de las causas clásicas de webs que «tiemblan» al hacer scroll. El problema suele ser escuchar el evento de scroll y cambiar propiedades como top, margin o background-position en cada movimiento, lo que obliga al navegador a recalcular la maquetación y repintar la página constantemente.
- ✓Anima solo transform y opacity, que el navegador puede componer sin recalcular la maquetación.
- ✓Si usas JavaScript, agrupa los cálculos en requestAnimationFrame y usa IntersectionObserver para activar solo las capas visibles.
- ✓Comprime y dimensiona las imágenes de fondo; suelen ser las más pesadas de la página y afectan al LCP.
- ✓No cargues librerías de animación en páginas que no las usan.
- ✓Prueba en móviles de gama media, no solo en tu ordenador.
- ✓Reserva el espacio de cada capa para no provocar saltos de contenido (CLS).
05 Parallax y accesibilidad: prefers-reduced-motion
El movimiento que no controla el usuario puede provocar mareo, náuseas o dolor de cabeza a personas con trastornos vestibulares. Las pautas WCAG recogen este riesgo en el criterio 2.3.3, «Animación desde interacciones» (nivel AAA): la animación de movimiento que se dispara por una interacción debe poder desactivarse, salvo que sea esencial. La propia documentación del W3C pone el parallax scrolling como ejemplo de animación normalmente no esencial.
-
1
Respeta la preferencia del sistema
Los usuarios activan «Reducir movimiento» en Windows, macOS, iOS o Android, y el navegador lo expone con la consulta prefers-reduced-motion: reduce. En ese caso, desactiva o suaviza el parallax.
-
2
Mantén el contraste del texto
Si el texto pasa sobre una imagen en movimiento, asegura un fondo o una capa que garantice el contraste en todo momento.
-
3
No escondas información en el efecto
Todo lo importante debe entenderse también con la animación desactivada y con lector de pantalla.
-
4
Evita secuestrar el scroll
No cambies la velocidad ni la dirección del desplazamiento del usuario; es desorientador y dificulta navegar con teclado.
06 Parallax y SEO: el problema de las webs de una sola página
El efecto en sí no penaliza en Google. Lo que perjudica es el tipo de web al que suele ir asociado: la one page, donde todos los servicios, la empresa y el contacto están en una sola URL con secciones enlazadas mediante anclas (#servicios, #contacto). Google indexa URLs, no fragmentos, y recomienda no usar fragmentos para cargar contenidos distintos porque Googlebot no puede resolverlos de forma fiable.
| Aspecto | One page con parallax | Web con varias páginas |
|---|---|---|
| Palabras clave | Una sola URL para todos los temas | Una página por servicio o búsqueda |
| Title y meta description | Uno para todo | Uno específico por página |
| Peso y velocidad | Una página muy pesada con muchas imágenes | Páginas más ligeras |
| Contenido en imágenes o canvas | Frecuente, y Google no lo lee como texto | Texto en HTML |
| Medición | Necesita páginas virtuales o eventos para saber qué sección se ve | Cada página se mide por separado |
07 ¿Cuándo usar parallax en tu web?
| Ventajas | Inconvenientes |
|---|---|
| Da profundidad y un aspecto memorable | Puede ralentizar la web, sobre todo en móviles |
| Guía la lectura en relatos y presentaciones de producto | Puede marear a personas sensibles al movimiento |
| Diferencia campañas y lanzamientos | Asociado a one pages, dificulta el SEO |
| Con CSS moderno puede ser ligero | Si se abusa, distrae de la llamada a la acción |
Nuestra recomendación: úsalo cuando el movimiento cuente algo (el antes y el después de una reforma, las capas de un producto, un recorrido por un espacio) y en una o dos secciones, no en toda la web. Un estudio de la Universidad de Purdue de 2013 concluyó que el parallax mejoraba algunos aspectos de la experiencia, pero no necesariamente la experiencia global, así que pruébalo con usuarios reales. Tienes más criterios en nuestras tendencias de diseño web que sí mejoran resultados.
Si quieres un efecto así bien resuelto, lo planteamos dentro de un diseño web a medida y lo validamos con criterios de diseño UX antes de programarlo.
Preguntas frecuentes sobre Parallax
Es un efecto de diseño en el que el fondo se mueve más despacio que el contenido al hacer scroll, lo que crea una sensación de profundidad en la página.
Significa «paralaje»: el cambio aparente de posición de un objeto según desde dónde se mira. En diseño web se habla de efecto parallax o desplazamiento con paralaje.
Con CSS, fijando el fondo o usando perspectiva o animaciones vinculadas al scroll, o con JavaScript y librerías como GSAP. En WordPress, muchos constructores lo ofrecen como opción sin programar.
El efecto en sí no, pero suele ir unido a webs de una sola página que concentran todos los temas en una URL y cargan mucho peso, y eso sí dificulta el posicionamiento.
Puede serlo si respeta la preferencia prefers-reduced-motion y desactiva o suaviza el movimiento para quien lo pide, sin esconder información en la animación.
Sí, si se programa animando transform y opacity. Algunas técnicas antiguas, como el fondo fijo, se ignoran en ciertos navegadores móviles, por lo que conviene probar en dispositivos reales.
Se usa menos como recurso para toda la web y más en secciones concretas, presentaciones de producto y relatos visuales, apoyado en CSS moderno.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗