0

Tengo un Banner, que tiene un "background-attachment: fixed", y quisiera que tuviera una animación que a medida de que hiciera scroll tuviese una opacidad menor; vi que esto se puede hacer con jquery, mas no con javascript puro. Seria de gran utilidad saber si no hay alguna librería que detecte el scroll o como hacerlo con javascript puro.

Este es mi código:

Html:

<header> <div class="bienvenida"> <h1>¡Bienvenid@!</h1> </div> <div class="banner"></div> </header>

CSS:

.banner{
background: url(../images/banner5.jpg);
position: relative;
width: 100%;
height: 49vh;
object-fit: cover;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;}

1 respuesta 1

2

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>

1
  • ¿y si fuera un blur como podría aplicar este codigo?
    – roguesquid
    el 23 mar. 2019 a las 23:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.