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 div
s vacíos. Ambos elementos tendrán una imagen de fondo. El último elemento recibirá la clase front
.
Aquí está el marcado:
1 |
... |
2 |
|
3 |
<section>
|
4 |
<h1>...</h1> |
5 |
<div class="img-wrapper"> |
6 |
<div style="background-image: url(cinque-terre-back.jpg);"></div> |
7 |
<div class="front" style="background-image: url(cinque-terre-front.jpg);"></div> |
8 |
</div>
|
9 |
</section>
|
10 |
|
11 |
... |
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:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
img-wrapper { |
4 |
display: grid; |
5 |
height: 100vh; |
6 |
}
|
7 |
|
8 |
.img-wrapper div { |
9 |
grid-column: 1; |
10 |
grid-row: 1; |
11 |
background-size: cover; |
12 |
background-position: center; |
13 |
background-repeat: no-repeat; |
14 |
background-color: var(--gray); |
15 |
transition: opacity 0.1s; |
16 |
}
|
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 en0
.
Aquí está el código JavaScript relacionado:
1 |
const checkpoint = 300; |
2 |
|
3 |
window.addEventListener("scroll", () => { |
4 |
const currentScroll = window.pageYOffset; |
5 |
if (currentScroll <= checkpoint) { |
6 |
opacity = 1 - currentScroll / checkpoint; |
7 |
} else { |
8 |
opacity = 0; |
9 |
}
|
10 |
document.querySelector(".front").style.opacity = opacity; |
11 |
});
|
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!
Más tutoriales con efectos durante el desplazamiento
Aprende más acerca de los efectos de desplazamiento con estos tutoriales:
- CSSCómo crear un efecto de escala de grises a color durante el desplazamiento (con CSS y JavaScript)George Martsoukos
- HTMLCómo ocultar/mostrar una cabecera fija durante el desplazamiento de la página con JavaScriptGeorge Martsoukos
- Desplazamiento de paralajeConsejo rápido: crea un efecto de paralaje muy simple con CSS y JavaScriptGeorge Martsoukos
- PatronesCómo crear una cabecera fija que se anime al desplazar la páginaGeorge Martsoukos