1. Blog
2. Diseño web

Qué es Parallax y cómo hacerlo

El efecto parallax es una técnica de diseño web que mueve el fondo de una página a una velocidad diferente al contenido principal, creando sensación de profundidad.

Se puede implementar con CSS puro, JavaScript o mediante plugins de WordPress sin conocimientos avanzados. Es un recurso visual efectivo para páginas de presentación, portfolios y landing pages, siempre que se use con moderación y sin sacrificar el rendimiento ni la accesibilidad.

Qué es el efecto parallax

El término «parallax» proviene de la astronomía y la óptica. Describe la diferencia aparente en la posición de un objeto cuando se lo observa desde dos puntos distintos. Aplicado al diseño web, el efecto parallax consiste en que el fondo de una sección se desplaza a una velocidad diferente —generalmente más lenta— que el contenido que está por encima de él.

El resultado visual es una ilusión de profundidad. Al hacer scroll, el visitante percibe que hay distintas capas en la página: algunas más cercanas y otras más lejanas, como ocurre al mirar el paisaje desde la ventanilla de un automóvil en movimiento.

Este efecto ganó popularidad en diseño web alrededor de 2011-2013, cuando los navegadores empezaron a manejar con más soltura las animaciones en CSS y las manipulaciones del DOM con JavaScript. Hoy sigue siendo un recurso habitual en páginas de presentación, portfolios creativos, landing pages y sitios corporativos que quieren transmitir dinamismo.

El efecto se puede lograr de tres maneras principales:

• Usando únicamente CSS (la opción más sencilla y ligera)
• Usando JavaScript (más control, más posibilidades)
• Usando plugins o constructores en plataformas como WordPress (sin escribir código)

Cada enfoque tiene sus ventajas y limitaciones, que se explican en detalle más adelante.

Para qué sirve y cuándo tiene sentido usarlo

El parallax no es un efecto neutral: llama la atención de forma inmediata y genera una experiencia visual más rica que una página estática. Pero eso no significa que deba usarse siempre.

Casos donde el parallax aporta valor real:

• Páginas de presentación o «hero»: la sección principal de un sitio donde se quiere causar una primera impresión fuerte.
• Portfolios creativos: fotógrafos, diseñadores, agencias digitales que quieren mostrar su capacidad técnica y estética.
• Landing pages de productos: si el producto tiene una narrativa visual (dispositivos tecnológicos, moda, gastronomía), el parallax refuerza el storytelling.
• Páginas one page: especialmente en sitios de una sola página donde se recorre el contenido con scroll, el parallax ayuda a separar secciones de forma elegante. Si estás diseñando este tipo de sitio, puede ser útil entender mejor qué es una One Page y cuándo conviene usarla.

Cuándo evitarlo o usarlo con cautela:

• Sitios con mucho contenido textual (blogs, noticias, tiendas con catálogos extensos): el parallax puede distraer y ralentizar la navegación.
• Proyectos donde el tiempo de carga es crítico, como tiendas de ecommerce con muchos productos.
• Cuando la audiencia principal usa dispositivos móviles: el parallax con fondos fijos no funciona bien en iOS y en muchos Android, y puede generar experiencias rotas si no se implementa con cuidado.

En la práctica, el error más común no es usar parallax sino usarlo en exceso: cuatro o cinco secciones con el mismo efecto repetido pierden impacto rápidamente.

Cómo hacer parallax con CSS puro

La técnica más simple y con mejor rendimiento es la que utiliza únicamente CSS, específicamente la propiedad background-attachment: fixed. No requiere JavaScript y funciona bien en la mayoría de los navegadores de escritorio.

Estructura HTML básica

<section class="parallax-section">
  <div class="contenido">
    <h2>Tu mensaje aquí</h2>
    <p>Descripción o llamada a la acción.</p>
  </div>
</section>

CSS para el efecto parallax

.parallax-section {
  background-image: url('tu-imagen-de-fondo.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenido {
  text-align: center;
  color: #ffffff;
  padding: 40px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
}

La clave está en background-attachment: fixed: mantiene la imagen de fondo fija respecto a la ventana del navegador mientras el contenido se desplaza normalmente al hacer scroll.

Cómo crear múltiples secciones parallax

.seccion-normal {
  background-color: #f5f5f5;
  padding: 80px 40px;
  text-align: center;
}

.parallax-1 {
  background-image: url('imagen-1.jpg');
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
  min-height: 400px;
}

.parallax-2 {
  background-image: url('imagen-2.jpg');
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  min-height: 400px;
}

<div class="seccion-normal">
  <h2>Sección de contenido</h2>
  <p>Texto explicativo aquí.</p>
</div>

<div class="parallax-1"></div>

<div class="seccion-normal">
  <h2>Otra sección de contenido</h2>
  <p>Más texto aquí.</p>
</div>

<div class="parallax-2"></div>

Limitación importante en móviles

background-attachment: fixed no funciona correctamente en iOS Safari ni en muchos navegadores de Android. Para solucionar esto, es recomendable desactivar el efecto en pantallas pequeñas:

@media (max-width: 768px) {
  .parallax-1,
  .parallax-2 {
    background-attachment: scroll;
  }
}

Cómo hacer parallax con JavaScript

Para lograr mayor control sobre la velocidad, la dirección y los elementos que se mueven, JavaScript es la herramienta adecuada. Hay dos caminos: escribir el código desde cero o usar una librería especializada.

Parallax básico con JavaScript puro

<div id="parallax-hero" style="position: relative; overflow: hidden; height: 500px;">
  <img 
    id="fondo-parallax" 
    src="imagen-fondo.jpg" 
    style="position: absolute; width: 100%; top: 0; left: 0;"
    alt="Fondo con efecto parallax"
  >
  <div style="position: relative; z-index: 2; padding: 100px 40px; color: white;">
    <h1>Título con parallax</h1>
  </div>
</div>

window.addEventListener('scroll', function() {
  const scrollY = window.scrollY;
  const fondo = document.getElementById('fondo-parallax');

  // Mueve el fondo a la mitad de la velocidad del scroll
  fondo.style.transform = 'translateY(' + (scrollY * 0.5) + 'px)';
});

El factor 0.5 controla la velocidad del parallax. Un valor más bajo (como 0.2) hace que el fondo se mueva más lentamente y el efecto sea más sutil. Un valor más alto (como 0.8) acerca la velocidad del fondo a la del scroll y reduce el efecto de profundidad.

Uso de la librería Rellax.js

Rellax.js es una librería ligera (menos de 5KB) que simplifica enormemente la implementación:

<!-- Incluir la librería -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"></script>

<!-- Elemento con parallax -->
<div class="rellax" data-rellax-speed="-2">
  <img src="fondo.jpg" alt="Fondo parallax">
</div>

// Inicializar Rellax
var rellax = new Rellax('.rellax');

El atributo data-rellax-speed acepta valores entre -10 y 10. Los valores negativos mueven el elemento hacia arriba al hacer scroll (efecto parallax clásico); los positivos lo mueven hacia abajo.

Optimización del rendimiento con requestAnimationFrame

Al escuchar el evento scroll de forma directa, se puede generar lag visual en páginas con muchos elementos. La solución es usar requestAnimationFrame:

let ticking = false;

window.addEventListener('scroll', function() {
  if (!ticking) {
    window.requestAnimationFrame(function() {
      const scrollY = window.scrollY;
      const fondo = document.getElementById('fondo-parallax');
      fondo.style.transform = 'translateY(' + (scrollY * 0.4) + 'px)';
      ticking = false;
    });
    ticking = true;
  }
});

Esta técnica asegura que la animación solo se calcule una vez por frame, lo que mejora notablemente el rendimiento en dispositivos con menos recursos.

Cómo hacer parallax en WordPress sin programar

Para quienes gestionan su sitio con WordPress, no es necesario tocar código. Existen varias formas de añadir parallax de forma visual.

Opción 1: Con Elementor

Elementor incluye parallax nativo en sus secciones y columnas. Los pasos son:

1. Editar una sección con Elementor.
2. Ir a la pestaña Estilo de la sección.
3. En Fondo, seleccionar una imagen.
4. Activar la opción Parallax en el campo «Efecto del fondo».
5. Ajustar la velocidad según el resultado visual deseado.

Opción 2: Con el editor de bloques (Gutenberg) y plugins

El bloque nativo «Portada» de WordPress permite añadir imagen de fondo, aunque el efecto parallax no está disponible de forma predeterminada. Con el plugin Advanced Gutenberg o Kadence Blocks se puede activar parallax en bloques específicos.

Opción 3: Con el plugin Parallax Scrolling

El plugin WP Parallax Content Slider o el más conocido Advanced WordPress Backgrounds permiten añadir secciones con parallax mediante un shortcode o bloque visual, sin necesidad de código.

1. Instalar el plugin desde el repositorio de WordPress.
2. Crear una nueva sección desde el menú del plugin.
3. Subir la imagen de fondo.
4. Configurar la velocidad del desplazamiento.
5. Insertar el shortcode en la página deseada.

Para que el parallax funcione correctamente en WordPress, el sitio necesita un hosting que responda con rapidez: cualquier lentitud en la carga del servidor se traduce en animaciones entrecortadas. Si tu sitio presenta este tipo de problemas, puede ser el momento de revisar el plan de hosting web que estás usando.

Errores comunes al implementar parallax

1. Usar imágenes demasiado pesadas como fondo

El parallax expone la imagen de fondo durante más tiempo y en más posiciones que una imagen estática. Si el archivo pesa 3 o 4 MB, el impacto en el tiempo de carga es severo. Lo recomendable es usar imágenes de entre 200 y 500 KB en formato WebP o JPEG optimizado. Una buena guía para este proceso es la de cómo optimizar imágenes para un sitio web.

2. No probar en dispositivos móviles

Como se mencionó antes, background-attachment: fixed falla en iOS. Muchos diseñadores prueban en escritorio, publican el sitio y reciben reportes de visitantes móviles que ven la imagen de fondo rota o estática sin el efecto esperado. La solución siempre es testear en dispositivos reales o usar herramientas de emulación antes de publicar.

3. Abusar del efecto en una misma página

Cinco secciones con parallax seguidas no generan cinco veces más impacto. Al contrario: el efecto pierde su valor diferenciador y el visitante se acostumbra. Lo ideal es reservar el parallax para uno o dos momentos clave de la página.

4. No considerar la accesibilidad

Algunos usuarios experimentan mareo o incomodidad con los efectos de movimiento en pantalla. La especificación CSS incluye la media query prefers-reduced-motion precisamente para esto:

@media (prefers-reduced-motion: reduce) {
  .parallax-section {
    background-attachment: scroll;
  }
}

Agregar estas dos líneas de código asegura que los usuarios que tienen activada la opción de reducir movimiento en su sistema operativo no vean el efecto.

5. Usar parallax en texto corrido

El efecto parallax funciona bien en imágenes de fondo. Aplicarlo directamente a bloques de texto que el usuario necesita leer mientras hace scroll genera incomodidad visual. Si se quiere aplicar parallax a texto, debe ser en titulares grandes y en secciones breves, nunca en párrafos de lectura.

6. Olvidar el impacto en el SEO por velocidad de carga

Un sitio con parallax mal implementado puede tardar más en cargar, lo que afecta directamente el posicionamiento en Google. Vale la pena revisar el impacto que tiene el hosting en el posicionamiento web para entender por qué la infraestructura donde corre el sitio también es parte de la ecuación.

Conclusión

El efecto parallax es una técnica de diseño web con fundamentos técnicos claros y un impacto visual real cuando se usa con criterio. La implementación más sencilla requiere solo unas pocas líneas de CSS; la más compleja puede involucrar librerías JavaScript y animaciones sincronizadas con el scroll.

Lo que determina si el parallax suma o resta no es la técnica en sí, sino el contexto: el tipo de sitio, la audiencia, la calidad de las imágenes y, sobre todo, el rendimiento del servidor donde corre el sitio.

Un sitio con animaciones visuales bien implementadas necesita un hosting que responda con consistencia. Neolo, con más de 20 años de experiencia desde 2002 y más de 10.000 clientes en todo el mundo, ofrece planes de hosting web con uptime consistente, soporte técnico atendido por personas reales y garantía de reembolso de 30 días. Es una opción concreta para pymes, freelancers y emprendedores que quieren que su sitio funcione bien sin preocuparse por la infraestructura.

Lo que dicen los clientes de Neolo

★★★★★ Fernando
«Hace muchos años que tengo web hosting en Neolo, y la verdad es que no tengo interrupciones en el servicio. Nuestras webs están siempre activas, y alguna vez cuando aparece algún inconveniente de origen externo y ajeno a ellos, la gente de Neolo corre a solucionarlo. Excelente servicio recibido, en lo técnico y en lo humano.»

★★★★★ Martin Aberastegue
«Neolo es la mejor compañía de alojamiento web con la que he trabajado. Hace más de 7 años que confío en sus servicios tanto para proyectos propios como de mis clientes.»

★★★★★ Pablo Gutiérrez
«Destaco la velocidad de su soporte y el tiempo de actividad del servidor, que es del 100%.»

Preguntas frecuentes

¿El efecto parallax afecta el SEO de mi sitio?

El parallax en sí mismo no penaliza el SEO, pero puede hacerlo indirectamente si provoca que la página cargue más lento. Google usa la velocidad de carga como factor de posicionamiento, especialmente en móviles. La solución es optimizar las imágenes de fondo, usar CSS cuando sea posible en lugar de JavaScript pesado y probar el rendimiento con herramientas como PageSpeed Insights.

¿Puedo hacer parallax sin saber programar?

Sí. Si el sitio está en WordPress, constructores como Elementor incluyen parallax nativo sin necesidad de escribir código. También existen plugins dedicados que permiten configurar el efecto de forma visual. La opción de CSS con background-attachment: fixed también es accesible para quienes tengan nociones básicas de estilos.

¿El parallax funciona en teléfonos móviles?

Depende de cómo esté implementado. La técnica de background-attachment: fixed no funciona en iOS Safari. Para que el efecto sea compatible con móviles, es necesario desactivarlo en pantallas pequeñas mediante media queries, o usar una implementación JavaScript que detecte el tipo de dispositivo y ajuste el comportamiento.

¿Cuál es la diferencia entre parallax con CSS y con JavaScript?

CSS con background-attachment: fixed es más simple, más liviano y tiene mejor rendimiento, pero ofrece menos control. Solo mueve el fondo de una imagen respecto al scroll. JavaScript permite mover cualquier elemento de la página, controlar la velocidad con más precisión y crear efectos más complejos (movimiento horizontal, rotación, cambios de opacidad). Para la mayoría de los sitios corporativos o de presentación, la solución CSS es suficiente.

¿Qué librería JavaScript recomiendan para parallax?

Las más utilizadas y con mejor soporte son Rellax.js (muy ligera, menos de 5KB), ScrollMagic (para efectos complejos vinculados al scroll) y GSAP con ScrollTrigger (la más potente, ideal para animaciones sofisticadas). Para proyectos simples, Rellax.js es la opción más práctica.

¿El parallax puede causar problemas de accesibilidad?

Sí. Los efectos de movimiento pueden generar incomodidad o mareo en personas con sensibilidad vestibular. Para mitigarlo, es importante implementar la media query prefers-reduced-motion que desactiva el efecto cuando el usuario lo ha configurado así en su sistema operativo.

¿Qué tipo de imágenes funcionan mejor para el efecto parallax?

Las imágenes que mejor funcionan son las que tienen un sujeto principal centrado y mucho espacio en los bordes, especialmente en la parte superior e inferior. Esto es importante porque al hacer scroll, la imagen se desplaza y pueden verse zonas que normalmente no serían visibles. Imágenes con horizonte amplio, fondos naturales o texturas funcionan especialmente bien.