En este sencillo tutorial te enseñaremos a crear un simple y efectivo efecto parallax a una imagen grande. Para lograrlo utilizaremos un poco de Javascript, pero recuerda que también puedes crear este tipo de efectos sin necesidad de Javascript, utilizando únicamente transformaciones 3D de CSS.
Una vez dicho todo esto, vamos a ver cómo crear nuestro efecto parallax con CSS y Javascript.
HTML
El diseño de nuestra página consistirá en dos secciones. La primera sección contendrá a la imagen grande a sus elementos hijos, mientras que la segunda contendrá el contenido principal de la pá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>
Fíjate en los atributos data-direction y data-speed asignados a los elementos de la primera sección. Dichos elementos son elementos parallax y los valores de sus atributos determinarán su comportamiento durante el scroll del usuario.
CSS
Ahora vamos a definir unas cuentas reglas CSS para nuestra página. Nada realmente importante, solo algo básico para que nuestra web tenga un diseño atractivo.
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; } }
Javascript
Para crear el efecto parallax, escucharemos el evento scroll.
Cada vez que se haga scroll en la página, recorreremos los elementos parallax y haremos lo siguiente:
-
Obtendremos el valor del atributo data-speed y lo multiplicaremos por el número de píxeles que se ha desplazado el documento al hacer scroll. Esto nos dará la velocidad a la que cada elemento parallax debe moverse. Por ejemplo, data-speed = 1 significa que un elemento se moverá a la misma velocidad que el contenido de la página. Por otro lado, un elemento con data-speed se moverá un 50% más despacio que la velocidad a la que se ha hecho scroll.
- Obtendremos el valor del atributo data-direction. Este atributo donde se moverán los elementos parallax cuando el usuario haga scroll en el documento. Sus posibles valores son up y down. Por ejemplo, data-direction = up significa que un elemento se moverá hacia arriba.
- Basándonos en los valores de sus atributos, utilizaremos la función translate3d() para mover los elementos hacia arriba o hacia abajo.
Este sería el código Javascript.
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)`; } } }