40deFiebre

¿Qué es el Parallax y cómo se hace? (con ejemplos)

4 min de lectura · Ir al TL;DR

Lo has visto mil veces, seguro: entras en una web, haces scroll y el fondo parece moverse a una velocidad distinta que el contenido. Ese efecto de profundidad se llama parallax (en español, paralaje).

Para probarlo vamos a construir un paisaje con dos capas. Puedes abrir el ejemplo de parallax o descargarlo en un ZIP. Funciona sin instalar nada: descomprime el archivo y abre index.html en tu navegador.

Qué produce el efecto

Si dos planos se desplazan a velocidades distintas, parecen estar a diferente distancia. En animación se ha utilizado este recurso con dibujos superpuestos; el Walt Disney Family Museum explica el uso de la cámara multiplano.

En una web puedes aplicarlo a imágenes, ilustraciones o fondos. En nuestro ejemplo, las montañas son formas hechas con CSS. El texto queda fuera del efecto para que se pueda leer con normalidad.

Cómo hacer parallax con HTML, CSS y JavaScript

Copia el siguiente código en un archivo llamado index.html. Contiene la página completa; no necesita jQuery ni otros archivos.

<!doctype html>
<html lang="es">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo de parallax</title>
<style>
  * { box-sizing: border-box; }
  body { margin: 0; font: 1.15rem/1.6 system-ui, sans-serif; color: #172c37; }
  .texto { max-width: 46rem; margin: auto; padding: 4rem 1.5rem; }
  .escena { position: relative; height: 65vh; min-height: 20rem; overflow: hidden; background: #c5e4ec; }
  .capa { position: absolute; inset: -80px 0; pointer-events: none; }
  .lejos { background: #75949c; clip-path: polygon(0 75%, 20% 25%, 45% 70%, 70% 15%, 100% 65%, 100% 100%, 0 100%); }
  .cerca { background: #2f5965; clip-path: polygon(0 80%, 30% 60%, 55% 85%, 85% 45%, 100% 70%, 100% 100%, 0 100%); }
  @media (prefers-reduced-motion: reduce) {
    .capa { transform: none !important; }
  }
</style>
<main>
  <section class="texto">
    <h1>Dos planos, dos velocidades</h1>
    <p>Desplázate por la página. Las montañas del fondo se mueven más despacio que las del primer plano.</p>
  </section>
  <div class="escena" aria-hidden="true">
    <div class="capa lejos" data-velocidad="0.12"></div>
    <div class="capa cerca" data-velocidad="0.25"></div>
  </div>
  <section class="texto">
    <h2>El contenido sigue en su sitio</h2>
    <p>El efecto solo mueve el paisaje decorativo. El texto se lee con el desplazamiento normal de la página.</p>
    <p>Activa la opción de reducir movimiento en tu sistema para ver la versión estática. Puedes cambiarla con esta página abierta.</p>
    <p>Las dos capas están dibujadas con CSS. No hay imágenes que descargar ni bibliotecas que instalar.</p>
    <p>Prueba también a estrechar la ventana: el paisaje ocupa el ancho disponible.</p>
  </section>
</main>
<script>
  const escena = document.querySelector('.escena');
  const capas = escena.querySelectorAll('.capa');
  const reducir = matchMedia('(prefers-reduced-motion: reduce)');
  let pendiente = false;

  function dibujar() {
    pendiente = false;
    const rect = escena.getBoundingClientRect();
    const distancia = innerHeight / 2 - (rect.top + rect.height / 2);
    capas.forEach(capa => {
      const y = reducir.matches ? 0 : Math.max(-60, Math.min(60,
        distancia * Number(capa.dataset.velocidad)));
      capa.style.transform = `translateY(${y}px)`;
    });
  }

  function programar() {
    if (!pendiente) {
      pendiente = true;
      requestAnimationFrame(dibujar);
    }
  }

  addEventListener('scroll', programar, { passive: true });
  addEventListener('resize', programar);
  reducir.addEventListener('change', programar);
  dibujar();
</script>
</html>

La clase .escena delimita el paisaje y oculta lo que sobresale. Dentro hay dos capas algo más altas que el contenedor: ese margen evita que aparezcan huecos cuando se desplazan. clip-path recorta cada una con forma de montañas.

JavaScript calcula dónde queda el centro de la escena respecto al centro de la ventana. Multiplica esa distancia por data-velocidad: el fondo usa 0.12 y el primer plano 0.25. translateY() aplica el desplazamiento. Puedes cambiar esos valores, pero si aumentas mucho la velocidad también tendrás que revisar el margen de las capas.

El movimiento se limita a 60 píxeles en cada sentido. Así, aunque sigas bajando por la página, las montañas no se salen del espacio reservado. Para agrupar las actualizaciones usamos requestAnimationFrame(), que programa el dibujo antes del siguiente repintado del navegador.

Adaptarlo a tu web

Sustituye las formas por imágenes de fondo si necesitas un paisaje o una ilustración más elaborada. Ajusta su encuadre al ancho del móvil y comprueba el peso de los archivos. Un efecto pequeño no justifica descargar una imagen enorme.

El contenedor lleva aria-hidden="true" porque este paisaje es decorativo. Si utilizas una imagen que aporta información, sitúa esa información fuera del contenedor oculto o cambia la estructura para que tenga una alternativa accesible.

Cuándo dejarlo quieto

El movimiento al hacer scroll puede resultar incómodo. La consulta prefers-reduced-motion permite respetar la preferencia de reducir movimiento del sistema. El ejemplo la comprueba tanto en CSS como en JavaScript y vuelve a dibujar las capas si cambia mientras la página está abierta. Si JavaScript falla o está desactivado, se ve el paisaje estático.

Antes de usarlo en una página, comprueba lo siguiente:

Si el parallax dificulta seguir la historia o encontrar una acción, reduce el movimiento o deja la imagen fija. La página tiene que seguir funcionando sin el efecto.

Diseño Web

Sigue leyendo

Ver todos los artículos