无JavaScript自动滚动视差效果

这个效果是仿照Chirs Coyier的视差教程，在Chirs的允许下使用星空背景。运行效果：这里观看：http://www.fofronline.com/experiments/parallax/#experiment,这个效果可以在Safari 4 Beta和Google Chrome中正常预览，实现这个效果不需要JavaScript。(但不能在IE7及以下版本查看)。

实现方法：这个页面的HTML代码非常简单。一个div定义背景，另一个div定义内容。这里使用了CSS3中的多种背景技术，所以需要额外的标签来表示其他背景图片。

将CSS背景容器设置在固定位置，通过上下左右属性使其占据页面底部。背景图片由Background属性指定，顶层背景首先指定。每张图片按照百分比定位，它们的位置是不一样的，这样当容器的大小改变时，每张图片都会移动，产生视差效果。

按照一般的思路，只有页面被JavaScript缩放或者控制，才能产生动画。这里使用了另一种方法。移动背景图像容器的左边缘(例如，从0px到100px)。这将改变容器的整体宽度，从而导致背景图片根据其百分比进行不同程度的移动。通过将时间长度和左侧位置设置得足够大，将产生连续的视差运动效果。

可以提高移动速度获得更有趣的结果，也可以增加一些鼠标动作。最后的CSS代码如下：。

资料：视差效应原本是一个天文术语。当我们观察星空时，离我们很远的星星移动得很慢，而离我们很近的星星移动得更快。当我们坐在车里看着窗外的时候，也感觉到远处的山好像没有在动，而附近的稻田却在飞来飞去。很多游戏都使用视差效果来增加场景的立体感。(翻译/曹思佳)