Skip to main content
Commonmark migration
Origen Enlace

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

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>

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>

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>

se añadieron 1470 caracteres en el cuerpo
Origen Enlace
enxaneta
  • 3.9k
  • 3
  • 12
  • 21

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>

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>

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>

Origen Enlace
enxaneta
  • 3.9k
  • 3
  • 12
  • 21

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>