在滚动div逐渐淡出淡出

Question

我想创建淡入淡出效果与滚动，但不知道如何。它就像http://www.popsci.com/。如果滚动，则背景图像（div id fixed-image）会变淡。他们的代码就像。但我还无法弄清楚如何在我的代码中轻松应用。请家伙们检查一下我的代码。

var opacity = 1; 
     var img = element.find('img'); 
     // Look for featured stories. 
     if (element.length > 0) { 
     // Attach background image element. 
     $('#page-wrapper').prepend('<div id="fixed-image" style="background-image: url(\'' + img.attr('data-lgsrc') + '\');"></div>'); 
     img.addClass('hidden'); 
     var scrollPercent; 
     $(window).scroll(function() { 
      // When User scrolls down, determine percentage from top to bottom of window. 
      scrollPercent = (($(window).scrollTop()/$(window).height() * 1.9) - 0.9); 
      if (scrollPercent < 0) { 
      $('#fixed-image').css({ 
       '-webkit-filter' : 'blur(0px)', 
       '-moz-filter'  : 'blur(0px)', 
       '-o-filter'  : 'blur(0px)', 
       '-ms-filter'  : 'blur(0px)', 
       'filter'   : 'blur(0px)' 
      }); 
      } 
      var opacityCount = 1.5 - Math.min(1.5, (scrollPercent + 1)); 
      $('#fixed-image').css('opacity', opacityCount); 
      if (scrollPercent <= 1) { 
      $('#fixed-image').css('opacity', opacityCount); 
      $('#fixed-image').css({ 
       '-webkit-filter' : 'blur(' + scrollPercent * 10 + 'px)', 
       '-moz-filter'  : 'blur(' + scrollPercent * 10 + 'px)', 
       '-o-filter'  : 'blur(' + scrollPercent * 10 + 'px)', 
       '-ms-filter'  : 'blur(' + scrollPercent * 10 + 'px)', 
       'filter'   : 'blur(' + scrollPercent * 10 + 'px)' 
      }); 
      } 
      else { 
      $('.content-wrapper-outer').css('background-color', 'rgba(255,255,255,' + opacity + ')'); 

我的演示是在这里https://jsfiddle.net/cyber007/6e6dbr6j/1/

我想滑块类将是淡入淡出，并逐步立足于滚动

UPDATE

$(window).scroll(function(){ 
    $(".slider").css("opacity", 1 - $(window).scrollTop()/250); 
    }); 

https://jsfiddle.net/cyber007/6e6dbr6j/2/这个工作正常。在控制台中，我想到一个小小的想法，即在即使去-值之后，看到不透明度值继续运行。我不认为值没有必要降值之后更

Answer 1

这里是在0到夹不透明度的功能，但according to MDN：“在区间外的任何值[01]，虽然有效，被钳范围内最近的限制“，所以这不是必须的。

$(window).scroll(function(){ 
    var opacity = 1 - $(window).scrollTop()/250; 
    if (opacity < 0) opacity = 0; 
    $(".slider").css("opacity", opacity); 
}); 

UPDATE

任意开始和你的过渡的结束时，使用线性方程，就像这样：

$(window).scroll(function(){ 
    var start = 200, end = 600; 
    var opacity = 1 - ($(window).scrollTop() - start)/(end - start); 
    if (opacity > 1) opacity = 1; 
    if (opacity < 0) opacity = 0; 
    $(".slider").css("opacity", opacity); 
    }); 

Here's a JSFiddle.