更改滾動背景顏色

我想創建一個效果，如下面的頁面http://readymag.com/背景顏色根據滾動位置而變化，但不知道如何去做，我不明白他們的代碼。更改滾動背景顏色

我見過幾個例子，從1種顏色變爲另一種，但我不確定如何用多種顏色來做到這一點。（我希望能夠指定每種顏色）

任何幫助將不勝感激。

Michael。

來源

2013-05-30 Michael Bole

你懂'sin'和'cos'？你是否明白顏色的十六進制表示仍然只是一個整數？從這兩個概念，你可以無限循環旋轉顏色，在你選擇的任何一步。 – crush

此外，這是幫助有特定問題的人，而不是做他們的工作.... – mercsen

我已經問過沒有人做任何工作，我所要找的是學習資源，我可以達到預期的效果，因爲我有點失落，要求不大。 –

這裏有一個簡單的方法來做到這一點：

HTML

<body onscroll="scroll()"> 
    ... 
</body>

的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

來源

2013-05-30 20:21:12 Vadim

感謝您回到我身邊，Vadim。好的方法，雖然我注意到這似乎是相當隨機的，通過色調循環，關於如何獲得更多的顏色控制的任何建議？ –

@MichaelBole我已經用腳本更新了文章，使用了相同的方法，可以讓你控制顏色 – Vadim

哇，這很完美，謝謝你的評論，幫助我更好地理解，因爲我是新手！ –

更改滾動背景顏色

回答

相關問題