Consejo rápido: crea un efecto de paralaje muy simple con CSS y JavaScript

() translation by (you can also view the original English article)

En este consejo rápido, aprenderemos a añadir un simple, pero útil, efecto de desplazamiento de paralaje a una imagen «hero». Para lograrlo, usaremos un poco de código JavaScript, pero ten en cuenta que puedes crear sitios web de paralaje CSS puro combinando transformaciones 3D.

Aquí está la página que vamos a crear. ¡Desplazate hacia abajo!

Vamos a crearlo en tres pasos fundamentales: iniciando con el marcado, luego el estilo y después el comportamiento JavaScript.

1. Empieza con el marcado HTML

El marcado de la página consta de dos secciones. La primera sección contiene la imagen «hero» y sus elementos secundarios, mientras que la segunda sección contiene el contenido principal de la página:

<section class="banner" data-direction="down" data-speed="0.6">
  <h1 class="banner-title" data-direction="up" data-speed="0.25">...</h1>
  <p class="banner-subtitle" data-direction="up" data-speed="0.35">...</p>
  <img class="skiing" src="IMG_SRC" alt="" data-direction="up" data-speed="0.85">
</section>

<section class="content">
  <div class="container">...</div>
</section>

Observa los atributos personalizados data-direction y data-speed asignados a los elementos de la primera sección. Estos componentes son los elementos de paralaje y los valores de sus atributos determinarán su comportamiento durante el desplazamiento de paralaje. ¡Más de ello en un minuto!

2. Añade el CSS

Luego, especificaremos algunas reglas de CSS para nuestra página. Nada realmente importante, solo algunas cosas básicas que mejorarán el diseño de la página:

body {
  font: 20px/1.6 sans-serif;
}

.banner {
  position: relative;
  height: 100vh;
  background: #ededed url(IMG_SRC) no-repeat center/cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.banner > *:not(.skiing) {
  font-weight: 900;
  letter-spacing: -0.05em;
  padding: 5px 15px;
  background: #ffc844;
}

.banner-title {
  font-size: 3em;
  margin-bottom: -0.5em;
  transform: rotate(-6deg);
}

.banner-subtitle {
  font-size: 1.5em;
  box-shadow: -15px -15px 15px rgba(0, 0, 0, 0.07);
  transform: rotate(-3deg);
}

.skiing {
  position: absolute;
  right: 40px;
  bottom: 20px;
  max-width: 150px;
}

.content {
  position: relative;
  padding: 20px 0;
  background: white;
}

.container {
  max-width: 1100px;
  padding: 0 15px;
  margin: 0 auto;
}

.content p + p {
  margin-top: 25px;
}

@media screen and (max-width: 500px) {
  body {
    font-size: 14px;
  }

  .skiing {
    right: 20px;
    max-width: 100px;
  }
}

3. Aplica JavaScript

Para crear el efecto de paralaje, escucharemos el evento scroll.

Cada vez que se desplaza la página, enlazamos los elementos de paralaje y hacemos lo siguiente:

Recuperamos el valor de su atributo data-speed y lo multiplicamos por el número de píxeles en que el documento se desplaza verticalmente. Eso nos da la velocidad a la que se ejecuta cada uno de los elementos de paralaje. Por ejemplo, data-speed = 1 significa que un elemento se moverá tan rápido como el contenido de la página. Por otro lado, un elemento con data-speed = 0.5 se moverá un 50% más lento que el desplazamiento de la página.
Recuperamos el valor de su atributo data-direction. Este atributo especifica dónde se moverán los elementos de paralaje a medida que se desplaza la página. Los valores posibles son up y down. Así que por ejemplo, data-direction = "up" significa que un elemento se moverá hacia arriba. En nuestro caso, todo menos la imagen se moverá hacia arriba.
Basados en sus valores de atributo, utilizamos la función translate3d() para mover los elementos hacia arriba o hacia abajo.

Aquí está el código JavaScript correspondiente:

const parallaxEls = document.querySelectorAll("[data-speed]");

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
  for (const parallaxEl of parallaxEls) {
    const direction = parallaxEl.dataset.direction == "up" ? "-" : "";
    const transformY = this.pageYOffset * parallaxEl.dataset.speed;
    if (parallaxEl.classList.contains("banner-title")) {
      parallaxEl.style.transform = `translate3d(0,${direction}${transformY}px,0) rotate(-6deg)`;
    } else if (parallaxEl.classList.contains("banner-subtitle")) {
      parallaxEl.style.transform = `translate3d(0,${direction}${transformY}px,0) rotate(-3deg)`;
    } else {
      parallaxEl.style.transform = `translate3d(0,${direction}${transformY}px,0)`;
    }
  }
}

Conclusión

¡Eso es! En este consejo rápido, creamos un efecto de desplazamiento de paralaje realmente simple con solo unas pocas líneas de JavaScript. Nuevamente, como ya se discutió, esta es una demostración básica y podría no ser adecuada para todos los casos de paralaje.

Los efectos de paralaje ciertamente pueden aportar carácter a tu sitio web, pero el navegador puede tener que realizar tareas «costosas» para crearlos, utilizando recursos e impidiendo el rendimiento. Asegúrate de tener en cuenta el rendimiento durante las implementaciones del paralaje.

No obstante, si deseas crear una experiencia de paralaje más avanzada, puedes mirar algunas bibliotecas de JavaScript que existen, como parallax.js.

¡Y como siempre, gracias por leer!

Consejo rápido: crea un efecto de paralaje muy simple con CSS y JavaScript

1. Empieza con el marcado HTML

2. Añade el CSS

3. Aplica JavaScript

Conclusión

Más generosidad de paralaje en Tuts+