Question

我正在尝试使用滚动创建fadein淡出效果，但不知道如何。它就像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/

我想滑块类将逐渐基于滚动淡入淡出和渐弱

更新

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

https://jsfiddle.net/cyber007/6e6dbr6j/2/这个工作正常。 jus one minor认为在控制台中我看到不透明度值在 0 之后继续运行，甚至是 - 值。我认为在值 0 之后不需要更多值

。

Answer 1

这是一个将不透明度剪辑为0的函数，尽管according to MDN：“区间[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.

在滚动div逐渐淡出淡出

1 个答案: