javascript - 在滚动 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/

我希望 slider 类会根据滚动逐渐淡入和淡出

更新

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

https://jsfiddle.net/cyber007/6e6dbr6j/2/这个工作正常。只是在控制台中的一个小想法，我看到不透明度值在 0 之后继续运行，甚至达到 - 值。我不认为在值(value) 0 之后不需要再降低值(value)

Answer 1

尽管 according to MDN，这里有一个将不透明度裁剪为 0 的函数:“区间 [0 到 1] 之外的任何值虽然有效，但都被限制在范围内最近的限制内，”因此并非绝对必要。

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

更新

对于过渡的任意开始和结束，请使用线性方程 ，像这样:

$(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.