用JS制作博客頁面背景隨滾動漸變的效果

今天頹了一會，用JavaScript給我的博客園博客寫了一個頁面背景隨滾動而漸變的效果，做完之后自我感覺良好……

下面就以我的博客園博客為例，介紹一下如何制作這個效果！

---

准備

• 申請博客園的JS權限（如果你也想把它用在自己的博客園上）
• 可能需要一些JS的基礎知識（你可以打開w3school，然后就當自己准備好了）
• 可能需要一些CSS基礎知識（你需要知道顏色是怎樣用16進制表示的）

——當然，你也可以復制下面的代碼然后走人……

注意：如果你想要用在自己的博客園上，請注意博客園的不同模板對應的元素class也可能是不同的。

代碼

首先，在“頁首HTML代碼”中新建一個div，放在最下面一層。這個div用來放漸變的背景顏色。

<div id="backGround" style="position: fixed; width:100%; height: 100%; top: 0; left: 0; background-color: #bff687; z-index: -1"></div>

然后用js監聽window.onscroll事件，記錄一個cnt變量，每監聽到一次，就給cnt加上1，然后用cnt生成當前顏色。

至於顏色的生成方式你可以自己發明一個。我用了三個相位不同的sin函數生成R、G、B三個顏色的值。

function getTitleValue(start, x){
		var ret = titleMax - 1 - rangeValue + Math.floor(rangeValue * Math.sin(start + x));
		return ret;
	}
function getBackgroundColor(){
	var red = getBackgroundValue(0, cnt * 2 * PI / 256).toString(16);
	var green = getBackgroundValue(2 * PI / 3, cnt * 2 * PI / 256).toString(16);
	var blue = getBackgroundValue(4 * PI / 3, cnt * 2 * PI / 256).toString(16);
	return "#" + red + green + blue;
}

這里講一下如何用js修改某個元素的顏色：

function changeColor(){
	var backGround = document.getElementById("backGround");
	var titles = document.getElementsByClassName("postTitle2");
	var newTitleColor = getTilteColor();
	backGround.style.backgroundColor = getBackgroundColor();
	for(var i = 0; i < titles.length; i++)
		titles[i].style.color = newTitleColor;
	cnt = (cnt + 1) % 256;
}

先getElementById，然后調用生成顏色的函數，生成了一個字符串，形如#aabbcc，代表顏色。然后用JS修改CSS。

完整代碼：

<div id="backGround" style="position: fixed; width:100%; height: 100%; top: 0; left: 0; background-color: #bff687; z-index: -1"></div>
		
<script>
	var cnt = 0, PI = Math.acos(-1);
	var rangeValue = 64, backgroundMax = 256, titleMax = 192;
	function getBackgroundValue(start, x){
		var ret = backgroundMax - 1 - rangeValue + Math.floor(rangeValue * Math.sin(start + x));
		return ret;
	}
	function getTitleValue(start, x){
		var ret = titleMax - 1 - rangeValue + Math.floor(rangeValue * Math.sin(start + x));
		return ret;
	}
	function getBackgroundColor(){
		var red = getBackgroundValue(0, cnt * 2 * PI / 256).toString(16);
		var green = getBackgroundValue(2 * PI / 3, cnt * 2 * PI / 256).toString(16);
		var blue = getBackgroundValue(4 * PI / 3, cnt * 2 * PI / 256).toString(16);
		return "#" + red + green + blue;
	}
	function getTilteColor(){
		var red = getTitleValue(0, cnt * 2 * PI / 256).toString(16);
		var green = getTitleValue(2 * PI / 3, cnt * 2 * PI / 256).toString(16);
		var blue = getTitleValue(4 * PI / 3, cnt * 2 * PI / 256).toString(16);
		return "#" + red + green + blue;
	}
	window.onload = window.onscroll = function changeColor(){
		var backGround = document.getElementById("backGround");
		var titles = document.getElementsByClassName("postTitle2");
		var newTitleColor = getTilteColor();
		backGround.style.backgroundColor = getBackgroundColor();
		for(var i = 0; i < titles.length; i++)
			titles[i].style.color = newTitleColor;
		cnt = (cnt + 1) % 256;
	}
</script>