在滾動頁面的同時多次更改背景顏色

我正在使用視差滾動來創建網站的這個項目。它應該是一個長傳呼機。當您向下滾動頁面時，當您到達頁面的每個新部分時，背景顏色應該會改變。在滾動頁面的同時多次更改背景顏色

我已經花了幾天的時間搜索網絡，也在這裏在stackoverflow，但我還沒有找到任何工作在我想要的方式。

我在這裏發現了堆這個腳本：

var tStart = 100 // Start transition 100px from top 
     , tEnd = 500 // End at 500px 
     , cStart = [250, 195, 56] // Gold 
     , cEnd = [179, 217, 112] // Lime 
     , cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[1] - cStart[0]]; 

    $(document).ready(function(){ 
     $(document).scroll(function() { 
      var p = ($(this).scrollTop() - tStart)/(tEnd - tStart); // % of transition 
      p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1] 
      var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)]; 
      $("body").css('background-color', 'rgb(' + cBg.join(',') +')'); 
     }); 
    });

http://jsfiddle.net/dtZDZ/12/這裏是小提琴

這個腳本不正是我想要的，但我只變色一次來回。當你向下滾動頁面時，我需要它改變背景顏色4-5次。此外，我希望它有一個平穩的過渡時，如改變顏色像小提琴:)

我希望有人可以幫助我，或只是指向正確的方向。

預先感謝您

來源

2013-05-07 Jonas Nilsson

爲什麼你想用javascript/jQuery來做到這一點？它可以通過css html – 2013-05-07 08:39:13

@Sarfaraz完成，CSS不支持滾動，你需要JS這個！ – drinchev 2013-05-07 08:42:19

@Safaraz我認爲這是最好的解決方案，並且當它在顏色之間改變時我也想要一種動畫效果。但是，如果我可以在html css中完成，那將很棒。你能告訴我如何？ – 2013-05-07 08:42:58

在這裏你去：

正如你在colors可變

var colors = [ 
    [250, 195, 56], // Gold 
    [250, 0, 0], // Red 
    [0, 250, 0], // Green 
    [0, 0, 250], // Blue 
    [179, 217, 112] // Lime 
]; 

var height = $('body').height() - window.innerHeight; 

$(document).scroll(function() { 
    var steps = Math.floor(height/colors.length); 
    var position = $(this).scrollTop(); 
    var currentStep = Math.floor(position/steps); 
    if (currentStep === colors.length) currentStep = colors.length - 1; 
    var rgb = $("body").css('background-color').replace('rgb(','').replace(')','').replace(/\s/g, '').split(',');  
    var previousColor = colors[currentStep] || colors[0]; 
    var nextColor = colors[currentStep+1] || colors[colors.length-1]; 
    var percentFromThisStep = (position - (currentStep * steps))/steps; 
    if (percentFromThisStep > 1) percentFromThisStep = 1; 

    var newRgb = [ 
    Math.floor(previousColor[0] + ((nextColor[0] - previousColor[0]) * percentFromThisStep)), 
    Math.floor(previousColor[1] + ((nextColor[1] - previousColor[1]) * percentFromThisStep)), 
    Math.floor(previousColor[2] + ((nextColor[2] - previousColor[2]) * percentFromThisStep)) 
    ]; 

    $("body").css('background-color', 'rgb('+ newRgb.join(',') +')'); 
});

演示喜歡這裏，您可以分配儘可能多的顏色：http://jsbin.com/ulohif/1/edit

來源

2013-05-07 09:46:46 drinchev

謝謝你的劇本，但我需要能夠選擇在不同顏色的發生。像Vucko早些時候做的一樣。就像從頂部的1000px變爲紅色，從頂部的2000px變爲綠色等等。你可以在腳本中加入這個:)？ – 2013-05-07 09:54:26

那麼，你可以從現在開始自己弄清楚。用這個代碼玩一下。 – drinchev 2013-05-07 10:13:49

該死的;）但是好的:)我是新手，當涉及到腳本，但我會嘗試 – 2013-05-07 10:16:37

你可以使用css使用漸變背景：

body { 
background-color: linear-gradient(red, blue, green, blue, red) 
}

向下滾動，您的背景會改變。這種方法有點「狡猾」，但它的工作原理是當它到達背景的末尾時會循環。

來源

2015-04-09 09:14:35 ninivert

在滾動頁面的同時多次更改背景顏色

回答

相關問題