你如何实现这种“滚动和改变多个背景图片”的效果?

时间:2011-02-09 05:19:51

标签: html5

我正在查看这个HTML5网站http://www.danhigbie.com,并发现“背景图像滚动”非常吸引人。我查看了它的Javascript,但没有找到更改背景图片的代码。

4 个答案:

答案 0 :(得分:1)

将网页保存到磁盘并使用文件better.jsbetter.cs。通过更改css类(在better.js中定义)

,在better.css文件中完成背景滚动

答案 1 :(得分:1)

我正在使用一些jQuery来根据滚动位置更改multiplebgs的背景定位。每个背景图像元素都以百分比从顶部定位,这可能有点难以理解,因为每个部分有很多背景图像。我取每个背景元素的垂直位置值,并根据当前滚动条位置对其进行修改。希望这会有所帮助。

答案 2 :(得分:0)

结果证明,只需将不同“部分”的背景位置声明为固定即可完成效果。找到了一篇很好的文章,解释了这种效果是如何起作用的:

Icon that changes color when scrolling

答案 3 :(得分:0)

这是一个为您执行此操作的JavaScript库,似乎工作得非常好: http://stolksdorf.github.com/Parallaxjs/