// find elements
var $window = $(window)
var $layer = $('#banner-message')
var $section = $('.section')
$(window).on('scroll', function() {
var $windowScroll = $window.scrollTop()
var $scroll = $windowScroll / 1000
if ( $scroll <= 1 && $scroll > 0 ){
var alphaBg = 1 - ( $windowScroll / 1000 )
$layer.css('opacity', alphaBg)
console.log('DEC',alphaBg);
}else if ( $scroll > 1 ){
var alphaBg = ( $windowScroll / 1000 ) -1
$layer.css('opacity', alphaBg)
console.log('INC',alphaBg);
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: url('https://unsplash.it/1500/750?image=1041');
width: 100%;
height:600px;
display: block;
background-size: cover;
z-index: -1;
width: 100%;
height: 100%;
opacity: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
.section{
height:1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="banner-message">
<div class="section"><</div>
<div class="section"><</div>
<div class="section"><</div>
</div>
Tengo una imagen de fundo en posicion fija... Cuando voy haciendo scroll me gustaria que esta imagen se va a bajar de opacidas desde 1 hasta 0 y despues siguiendo con el scroll desde 0 hasta 1 y así sucesivamente...
por ahora la imagen se baja desde 1 hasta 0 y vuelve desde 0 hasta 1, pero siguiendo va a salir mas de 1.
en este enlace esta una demo del mi codigo https://jsfiddle.net/ptrwymwL/
Gracias