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函数中完成。

有没有办法可以改进代码？

P.S。我试图实现的效果与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>

改善背景动画颜色变化

1 个答案: