很多人都问我们在这个新的网站上背景滚动的效果是怎么实现的，所以这一篇我就向大家解释一下它的工作原理，这样大家在看源代码时可以省去一些麻烦。按你自己的想法使用自己的设计而不要直接COPY我们的代码和图片——毕竟我们在这上面花了大把时间~

它怎么工作的

这个技巧实现起来比它看起来容易得多，其实它就是把一张很长的渐变图像放到一些透明的PNG图像后面去滚动。页眉的背景（包括我们的LOGO、导航条和笔记本图像）都有透明度和一些文字，但主页面的图像上的标题文字则是透明图像。

用到的图片

整个效果中我们使用本站的图片，不过你有需要的可能就只是背景和页眉的图片吧，我们有：

背景图片

页眉图片

主页内容图片

页脚图片

CSS

为了对搜索引擎、屏幕阅读器和早先版本的浏览器友好，我为还是得在背景图片上加上说明文字，然后再用CSS把它们隐藏起来。

JavaScript

JavaScript就是让这一切变得神奇的魔法，这里我们使用jQueyr框架和CSS来让背景动起来。

$(function() {

	// ***
	// 背景滚动
	// ***

	// 背景图像高度，单位px
	var backgroundheight = 4000;

	// 取得当前时间的分钟/小时
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();

	// 计算一下今天已经过了百分之多少，例如下午六点 = 75%
	var hourpercent = hour / 24 * 100;
	var minutepercent = minute / 60 / 24 * 100;
	var percentofday = Math.round(hourpercent + minutepercent);

	// 计算一下从多少px的地方开始滚动图像
	// 通过使用今天已经过的百分比
	var offset = backgroundheight / 100 * percentofday;

	// 图像的起点大约是早点六点, 所以调整它偏移 1/4
	var offset = offset - (backgroundheight / 4);

	function scrollbackground() {
		// 将偏移量降到1px为止, 如果小于1px，就增加它
		// 背景的最小高度为1px
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// 应用背景的位置
   		$('body').css("background-position", "50% " + offset + "px");
   		// 让它继续滚动
   		setTimeout(function() {
			scrollbackground();
			}, 100
		);
   	}

	// 开始滚动
	scrollbackground();
}

真正灵巧的部分

读过上面的代码你可能会注意到，如果你在一天内不同的时间来访问我们的网站，那么背景也是从不同的地方开始滚动的，比如说，如果你是晚上访问我们的网站，你会看见夜空的背景，如果在早上，你会看见日出~

如果你有任何评价、疑问或者对代码改进的看法，可以和我们联系。

2009-07-30更新

一些评论中提到，在Firefox 3.5下面CPU的占用率会大幅上升，所以我就更新了代码。新的代码抛弃了backgroundposition.js和jQuery的animate()方法，使用的是简单的改变CSS中body背景的background-position值，每次循环改动1px。在一些使用Firefox 3.5的老电脑上，CPU的占用率已经从65%左右下降到了30%，其他的浏览器好像还没出现这个问题，欢迎继续反馈！

译者注：

最后一句不知道怎么翻译：CPU usage on an older machine running FireFox 3.5 went from around 65% to 30%. All other browsers still appear not to struggle with it.囧……

就我自己体验，在Firefox 3.5上使用这个效果很卡，而其他浏览器不会出现问题。

查看效果

直接访问http://youlove.us/，然后仔细看看首页头部的背景，中部标题的颜色和页脚背景的变化，相当不错的效果。

文本来源于The youlove.us scrolling background effect explained，中文翻译源于ZH CEXO’s BLOG，基于CC协议发布，请转载时注明“署名-非商业性使用-相同方式共享”。