Consejo rápido: cómo crear un efecto de desvanecimiento simple durante el desplazamiento

Spanish (Español) translation by Carlos (you can also view the original English article)

En el tutorial superbreve de hoy, aprenderemos cómo crear un simple, pero útil efecto de desplazamiento. A medida que nos desplazamos en la página, la visibilidad de dos elementos cambiará dependiendo de la posición del desplazamiento.

Como dice el dicho: «una imagen vale más que mil palabras», así que veamos lo que vamos a crear (desplázate hacia abajo para ver el efecto):

1. Empieza con el marcado de la página

Del mismo modo que en el tutorial anterior, definiremos una sección con una cabecera y una envoltura div a pantalla completa. La envoltura incluirá dos divs vacíos. Ambos elementos tendrán una imagen de fondo. El último elemento recibirá la clase front.

Aquí está el marcado:

...

<section>
  <h1>...</h1>
  <div class="img-wrapper">
    <div style="background-image: url(cinque-terre-back.jpg);"></div>
    <div class="front" style="background-image: url(cinque-terre-front.jpg);"></div>
  </div>
</section>

...

2. Añade el CSS

Como ya se ha comentado, el elemento de envoltura cubrirá la altura de la ventana gráfica completa. Además, sus elementos secundarios se apilarán uno encima del otro. De forma predeterminada, aparecerá el último elemento.

Los estilos son los siguientes:

/*CUSTOM VARIABLES HERE*/

img-wrapper {
  display: grid;
  height: 100vh;
}

.img-wrapper div {
  grid-column: 1;
  grid-row: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--gray);
  transition: opacity 0.1s;
}

3. Anima durante el desplazamiento

A medida que empecemos a desplazarnos hacia abajo, el elemento .front se desvanecerá gradualmente y aparecerá su elemento hermano. Por el contrario, a medida que empecemos a desplazarnos hacia arriba, el elemento .front se desvanecerá gradualmente y, por tanto, se situará encima de su hermano.

Para lograrlo, primero almacenaremos en la variable checkpoint un número (cámbialo según tus necesidades) que determinará después de cuántos píxeles debe desaparecer el elemento .front. Después, prestaremos atención al evento scroll y realizaremos las siguientes acciones dentro de su callback (llamada de vuelta):

Llevar un registro de cuánto se ha desplazado un usuario verticalmente.
Si la cantidad de su desplazamiento es menor que el número objetivo, el elemento .front se irá ocultando o haciendo visible de manera gradual dependiendo de la dirección del desplazamiento. En caso contrario, por seguridad, estableceremos su opacidad en 0.

Aquí está el código JavaScript relacionado:

const checkpoint = 300;

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll <= checkpoint) {
    opacity = 1 - currentScroll / checkpoint;
  } else {
    opacity = 0;
  }
  document.querySelector(".front").style.opacity = opacity;
});

Has terminado tu simple efecto de desvanecimiento durante el desplazamiento

¡Hecho! Con solo unas cuantas líneas de código, logramos crear un interesante efecto de desplazamiento que puedes probar, especialmente, en las secciones hero de tus páginas.

Esperemos que hayas disfrutado de este pequeño ejercicio y te hayas inspirado para crear algo similar en un siguiente proyecto. Como idea rápida, en lugar de tener dos imágenes distintas, puedes combinar esta demostración con la del tutorial anterior y revelar la imagen a color.

Como siempre, ¡muchas gracias por leer!