youlove.us上的背景滚动效果是怎样实现的（翻译）
很多人都问我们在这个新的网站上背景滚动的效果是怎么实现的，所以这一篇我就向大家解释一下它的工作原理，这样大家在看源代码时可以省去一些麻烦。按你自己的想法使用自己的设计而不要直接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协议发布，请转载时注明“署名-非商业性使用-相同方式共享”。
目前已经有 15 条回复，欢迎继续就座
受教了 代码保存
那句的意思应该是老机器使用Firefox 3.5运行这个脚本是CPU占用率会达到30%~65%。我Q6600+2G还有点卡呢。
@Louis Han:创意很好，但实用性不足
@bolo:好像不是的……原文是
After a few comments regarding the processor usage under FireFox 3.5 i’ve updated the script to no longer use backgroundposition.js or jQuery’s animate() method – it now simply changes the body’s CSS background-position value by 1 pixel on each loop iteration. 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.
我不知道All other browsers still appear not to struggle with it.怎么翻译……
测试发现，除了Firefox有问题，别的浏览器都还好，可能是这个意思吧……
我是看到代码就晕了……
@Lucifr:现在很多人都这样？
youlove仿似换了背景
那效果我看着5秒…晕了
@MY-Hou:它没换背景，它的背景是一张高4000px的图片在滚动，不同的时间去看会从不同的位置开始滚动，所以好像背景在变。
你起得早还是没有睡啊？
昨晚通宵了,很久没这么有”激情”咯
大家有空常交流!
实际上除非必要,建议少用耗资源的js,毕竟还是有好多人的电脑没那么强….别喷我
@张三blog:嗯，交流是好事，呵呵
你说得对，实用性不大，但好像Firefox渲染它的时候也有问题
@walysclw:我一口盐汽水喷死你！
http://saicn.com/now/
project-nowhere
是这样的效果么？
@扯:就是这个效果，在Firefox下卡得要死
@ZH CEXO: 恩
啊~~~~我晕车！