javascript - 改善背景动画颜色变化

Question

我想在用户到达特定部分时更改背景颜色动画。

这是我编写的 jQuery 代码:

var initialColors = [];

$('section.changecolorbg').each(function(i){
  initialColors[i] = $(this).css("backgroundColor");
});

$(window).scroll(function() {
  $('section.changecolorbg').each(function(i){
    if(isScrolledIntoView($(this))){

      var bgc = initialColors[i];

      $(this).parent().children('.changecolorbg').each(function(){
        $(this).css("backgroundColor", bgc);
      });

    }
  })
});

function isScrolledIntoView(elem)
{
  var hT = elem.offset().top,
       hH = elem.outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop() + 200;

   return (wS > (hT+hH-wH))
}

这些部分最初会有背景颜色，这就是我将它们保存在变量中的原因。这样做的问题是它的工作速度非常慢。我认为这是因为所有检查都需要在 .scroll 函数中完成。

有什么方法可以改进代码吗？

附注我想要达到的效果与 http://sfcd.com/ 相同

Answer 1

您可以尝试使用 CSS 中的 hsl 颜色(色调、饱和度、亮度)，并从 window.scrollY 位置导出色调值:

var body = document.getElementsByTagName('body')[0];

function changeHue() {
    var hue = (window.scrollY / 20);
    body.style.backgroundColor = 'hsl('+hue+', 100%, 50%)';
}

window.addEventListener('scroll', changeHue, false);

body {
background-color: hsl(0,100%,50%);
}

div {
height: 10000px;
}

<div></div>