根據頁面位置更改背景顏色

我想要根據滾動更改背景顏色。紅色爲藍色爲例...根據頁面位置更改背景顏色

此代碼的作品，但我怎樣才能將灰色更改爲顏色？

http://fiddle.jshell.net/schmudde/ffk6phq0/

$(document).ready(function(){ 
    $(document).scroll(function() { 
     var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop()/210, 0.9); 
     var channel = Math.round(alpha * 255); 
     $("body").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')'); 
    }); 
});

來源

2016-08-03 user3870112

要顏色之間褪色，你可以稍微調整你的代碼信道之間的淡出，而不是所有的三個設置爲相同的值。根據您的藍色到紅色例如，看到更新後的小提琴：http://fiddle.jshell.net/j6tc4e9f/

$(document).ready(function(){ 
    $(document).scroll(function() { 
     var alpha = Math.min(0.0 + 0.4 * $(this).scrollTop()/210, 0.9); 
     var channel = Math.round(alpha * 255); 
     var channel2 = 255 - Math.round(alpha * 255); 
     $("body").css('background-color', 'rgb(' + channel + ',' + 00 + ',' + channel2 + ')'); 
    }); 
});

來源

2016-08-03 14:46:06 Kyro

如何改變顏色？我真的不明白這個過程......例如，如果我的開始顏色是＃e5cec7而最後是＃e6e6e6？ – user3870112

您需要重新修改它以獲得3通道淡入淡出效果。您只需將十六進制轉換爲RGB值，併爲函數提供開始和結束通道值。可能有更好的方法來做到這一點，但在我的頭頂，請參閱更新的小提琴http://fiddle.jshell.net/ffcagtc6/ – Kyro

-1

$(document).ready(function(){  
     var scroll_pos = 0; 
     $(document).scroll(function() { 
      scroll_pos = $(this).scrollTop(); 
      if(scroll_pos > 210) { 
       $("body").css('background-color', 'blue'); 
      } else { 
       $("body").css('background-color', 'red'); 
      } 
     }); 
    });

來源

2016-08-03 14:32:15 Maheswari

我想消除它... – user3870112

根據頁面位置更改背景顏色

回答

相關問題