3

// 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

4
  • ¿Quieres que el tamaño del body represente la opacidad? Es decir, ¿que cada píxel que bajas o subes mediante el scroll baje o suba la opacidad de la imagen?
    – gugadev
    Commented el 11 may. 2018 a las 14:18
  • No exactamente... me gustaria que se sigo con el scroll la opacidad se baja asta 0 y vuelve a subir hasta 1 y siguiendo asi.. hasta el final de la pantalla, en el fiddle ahora la imagen vuelve a mostrarse solo dos vez cuando yo necesito que se vuelve a mostrar por una tercera vez Commented el 11 may. 2018 a las 14:24
  • 1
    Vale, osea, quieres que alterne la opacidad mientras usas el scroll.
    – gugadev
    Commented el 11 may. 2018 a las 14:25
  • Exactamente! Muchas gracias Commented el 11 may. 2018 a las 14:26

1 respuesta 1

1

Simplemente tienes que cambiar la transparencia del fondo en el evento 'scroll'. Te dejo un ejemplo muy sencillo sin imagen de fondo, adaptarlo a background-image es relativamente trivial:

let toTransparent= true;
let opacity=1;
$(window).on('scroll', function(){
  if (toTransparent) {
    opacity-=0.01;
    if (opacity<0.01) {
      toTransparent=false;
    }
  } else {
    opacity+=0.01;
    if (opacity>0.99) {
      toTransparent=true;
    }
  }
  $('#d').css('background-color',`rgba(255,0,0,${opacity})`);
  
})
div {
  height:500vh;
  width:50%;
  background-color: rgba(255,0,0,1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d"></div>

4
  • 1
    Sí, pero creo que la idea es que al llegar al top o al bottom o sea transparente o sea sólido. Tal como está la opacidad puede quedar a medias cuando se llega al final o al inicio del contenedor.
    – gugadev
    Commented el 11 may. 2018 a las 15:02
  • Como comentaba @gugadev necesito que la imagen de fundo se mostrara 3 vezez, llega a ser transparente ( se cambiara imagen de fundo) i vuelve a ser solida... siguiendo asi por 3 vezez Commented el 11 may. 2018 a las 15:28
  • Entonces hay que calcular el % de scroll y actual conforme a ese valor... a ver si tengo tiempo y lo miro esta tarde/noche Commented el 11 may. 2018 a las 15:30
  • Muchas gracias @PabloLozano, esta imagen de fundo es como una imagen de portada por cada secion, abajo de la imagen ( cuando es trasparente ) tengo que hacer subir textos Commented el 11 may. 2018 a las 15:40

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.