Estoy tratando de animar un valor de opacidad de 0 a 1, en función de la posición de desplazamiento dentro de la altura de la ventana gráfica. El siguiente código establece variables para windowHeight y scrollTop, que se pueden combinar para calcular percentageScrolled (0–100) de la altura de la ventana gráfica. En base a esto, puedo cambiar los valores de CSS en los puntos de ajuste, pero en cambio quiero cambiar gradualmente la opacidad de 0–100 de percentageScrolled.

¿Cómo puedo ajustar el siguiente código para hacer la transición / animar la opacidad?

Gracias.

$(window).on('scroll', function(){

    // Vars
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();
    var percentageScrolled = (scrollTop*100)/windowHeight;

    if( percentageScrolled < 100 ) {
        $('.colour-overlay').css('opacity', '1');
    } else {
        $('.colour-overlay').css('opacity', '0');
    }

});
0
dungey_140 10 may. 2019 a las 13:40

3 respuestas

La mejor respuesta

Puede eliminar if y establecer la opacidad en el porcentaje dividido por 100

$(window).on('scroll', function() {

  // Vars
  var windowHeight = $(window).height();
  var scrollTop = $(this).scrollTop();
  $('.colour-overlay').css('opacity', scrollTop / windowHeight);

});
.colour-overlay {
  display: block;
  width: 20px;
  height: 1200px;
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="colour-overlay"></div>
1
Ravindra Gupta 10 may. 2019 a las 10:57
$(‘.colour-overlay’).css(opacity, percentageScrolled / 100);

En lugar de la declaración if else. También como consejo general, trate de evitar el uso de var, use const o let en su lugar y si su proyecto no depende de jquery, trate de evitarlo también.

const overlays = document.querySelectorAll(‘.colour-overlay’);
window.addEventListener('scroll', () => {

    const windowHeight = window.offsetHeight;
    const scrollTop = window.scrollTop;
    const percentageScrolled = (scrollTop * 100) / windowHeight;

    for (const overlay of overlays) {
        overlay.style.opacity = percentageScrolled / 100;
    }

});

Esta sería la solución js pura.

1
Никита Гулис 10 may. 2019 a las 11:03

No sé si te entendí bien, pero escribí un ejemplo para echar un vistazo.

$(document).on('scroll', function(){

    // Vars
  // use body instead of window, body will return the right height where window will return the view size
    var windowHeight = $("body").height(); 
    var scrollTop = $(this).scrollTop();
var percentageScrolled = Math.abs((((scrollTop / windowHeight) * 100) / 100 ));
  $('.colour-overlay').css('opacity', percentageScrolled);

});
.colour-overlay{
background:red;
height:1000px;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="colour-overlay"></div>
1
Alen.Toma 10 may. 2019 a las 11:10