我想逐步改變背景顏色3次。漸進背景變化 - JavaScript
例如,我希望它逐漸從藍色變成灰色變成紫色。目前,背景從藍色轉變爲灰色。
試圖說明吧:
= Blue
==
===
====
===== Grey
====
===
==
= Purple
可能有人請幫助我讓它從灰色到紫色去第一個轉換後嗎?
$(document).ready(function(){
var scroll_pos = 0;
var animation_begin_pos = 0;
var animation_mid_pos = 500;
var animation_end_pos = 1000;
var beginning_color = new $.Color('rgb(0,156,243)');
var middle_color = new $.Color('rgb(36,40,47)');
var ending_color = new $.Color('rgb(97,20,204)');
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos >= animation_begin_pos && scroll_pos < animation_mid_pos) {
var percentScrolled = scroll_pos/(animation_mid_pos - animation_begin_pos);
var newRed = beginning_color.red() + ((middle_color.red() - beginning_color.red()) * percentScrolled);
var newGreen = beginning_color.green() + ((middle_color.green() - beginning_color.green()) * percentScrolled);
var newBlue = beginning_color.blue() + ((middle_color.blue() - beginning_color.blue()) * percentScrolled);
var newColor = new $.Color(newRed, newGreen, newBlue);
$('body').animate({ backgroundColor: newColor }, 0);
// messes up starting here
} else if (scroll_pos >= animation_mid_pos && scroll_pos <= animation_end_pos) {
scroll_ps = $(document).height() - $(this).scrollTop() - $(this).height();
var percentScrolled = scroll_pos/(animation_end_pos - animation_mid_pos);
var newRed = middle_color.red() + ((ending_color.red() - middle_color.red()) * percentScrolled);
var newGreen = middle_color.green() + ((ending_color.green() - middle_color.green()) * percentScrolled);
var newBlue = middle_color.blue() + ((ending_color.blue() - middle_color.blue()) * percentScrolled);
var newColor = new $.Color(newRed, newGreen, newBlue);
$('body').animate({ backgroundColor: newColor }, 0);
} else if (scroll_pos > animation_end_pos) {
$('body').animate({ backgroundColor: ending_color }, 0);
} else if (scroll_pos < animation_begin_pos) {
$('body').animate({ backgroundColor: beginning_color }, 0);
} else { }
});
});
我玩過一段時間:http://jsfiddle.net/Ldgevs6r/問題是,從灰色切換到紫色,正如你可以在小提琴中看到的百分比跳躍s從.998到.5,所以它使得初始啓動開關變得非常大,並且它的超級引人注目。我會稍後再討論它,看看我能否找到一種方法來使整個事物的價值規範化。 – AtheistP3ace