javascript - 如何在滚动事件上为背景颜色不透明度设置动画？

Question

我有两段代码要合并，但不确定实际的正确标记以及如何正确编写。

function EasyPeasyParallax() {
  scrollPos = $(document).scrollTop();
    $('#header_nav').css({
        'background-color': 'rgba(0, 0, 0, 0.8)'
      //'opacity': 0.5+(Math.min(scrollPos/100,1))
  });
};

$(function(){
  $('body').bind('mousewheel',EasyPeasyParallax);
});

当我向下滚动页面时，不透明度选择器起作用。但是，我只想定位 div 的背景色。如何将“背景颜色”选择器与 scrollPos/100 代码结合起来？

Answer 1

您可以使用此代码为滚动事件的 background-color 的 opacity 属性设置动画。

jsFiddle Demo

function EasyPeasyParallax() {
    var scrollPos = $(document).scrollTop();
    var targetOpacity = 1;
    scrollPos < 1000 ? targetOpacity = '0.'+ (scrollPos*100)/10 : targetOpacity;
    $('span').css({
        'background-color': 'rgba(0, 0, 0, '+ targetOpacity +')'
    });
    console.log(scrollPos,targetOpacity);
};

$(function(){
    $(window).scroll(function() {
        EasyPeasyParallax();
    });
});

-

如果你想用 jQuery 为 background-color 设置动画，请检查这个答案:

Special color transition effect with pure jQuery animation // no ui or other libary