滚动时更改背景颜色

我想创建一个类似于下一页http://readymag.com/的效果 ，其中背景颜色根据滚动位置而变化，但不知道如何去做，我无法理解他们的代码。

我已经看到一些从1种颜色变为另一种颜色的例子，但我不确定如何使用多种颜色。 （我希望能够指定每种颜色）

任何帮助将不胜感激。

迈克尔。

Answer 1

这是一个简单的方法：

HTML

  ...  

JavaScript的

 // HSL Colors var colors = [ [0, 100, 50], [113, 75, 25], [240, 87, 40], [328, 24, 40] ], el = document.getElementsByTagName('body')[0], // Element to be scrolled length = colors.length, // Number of colors height = Math.round(el.offsetHeight / length); // Height of the segment between two colors function scroll() { var i = Math.floor(el.scrollTop / height), // Start color index d = el.scrollTop % height / height, // Which part of the segment between start color and end color is passed c1 = colors[i], // Start color c2 = colors[(i+1)%length], // End color h = c1[0] + Math.round((c2[0] - c1[0]) * d), s = c1[1] + Math.round((c2[1] - c1[1]) * d), l = c1[2] + Math.round((c2[2] - c1[2]) * d); el.style['background-color'] = ['hsl(', h, ', ', s+'%, ', l, '%)'].join(''); } 

工作示例： http ： //jsbin.com/elolud/2/edit