Estoy utilizando el evento scroll para el window
.
window.addEventListener('scroll', function(evt) {...
Estoy calculando la transparencia relativo al desplazamiento de la ventana en y window.scrollY
y de la altura de la ventana window.innerHeight
.
let transparencia = window.scrollY / window.innerHeight * 2
Después establezco la opacidad del banner como 1 - transparencia
.
Espero que sea útil.
window.addEventListener('scroll', function(evt) {
let transparencia = window.scrollY / window.innerHeight * 2
transparencia = transparencia < 1 ? transparencia : 1;
banner.style.opacity = 1 - transparencia
}, false);
.banner{
background: url(https://images.unsplash.com/photo-1553264646-7eb44743436f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
position: relative;
width: 100%;
height: 49vh;
object-fit: cover;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;}
main{height:1000px;background:#d9d9d9}
<header>
<div class="bienvenida">
<h1>¡Bienvenid@!</h1>
</div>
<div id="banner" class="banner"></div>
</header>
<main></main>
Actualización
El OP comenta:
¿y si fuera un blur como podría aplicar este código?
En este caso necesitas calcular el valor para el blur. A diferencia de opacity
que toma valores entre 0 y 1 para el blur necesitas valores entre 0 y lo que fuera.
Estoy calculando el blur como
let blur = window.scrollY / 10;
Después cambio los estilos del banner aplicando un filtro css:
banner.style.filter = `blur(${blur}px)`;
A continuación viene una demo:
window.addEventListener('scroll', function(evt) {
let blur = window.scrollY / 10;
banner.style.filter = `blur(${blur}px)`;
}, false);
.banner{
background: url(https://images.unsplash.com/photo-1553264646-7eb44743436f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
position: relative;
width: 100%;
height: 49vh;
object-fit: cover;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
main{height:1000px;background:#d9d9d9}
<header>
<div class="bienvenida">
<h1>¡Bienvenid@!</h1>
</div>
<div id="banner" class="banner"></div>
</header>
<main></main>