如何实现此背景滚动效果？

Question

我非常喜欢每个背景部分相互重叠的方式,向下滚动.我看到它做了很多:这里是链接:http://www.soleilnoir.net/believein/

任何想法如何实现类似的效果？

谢谢

Answer 1

这种效应称为视差.

以下是与此效果相关的一些链接:

• 来自Nike的精彩演示http://www.nike.com/jumpman23/aj2012/
• 一组视差http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design(确保看到每个例子,有些真的很棒!例如:http:// benthebodyguard. com/index.php http://www.siebennull.com/ http://janploch.de/)
• Mercedez Class A网站http://a-class.mercedes-benz.com/com/en/index.html#!/?s=li​​ve (不是真正的视差,但仍然很棒)
• 关于如何使用视差效果制作图像滑块的教程http://tympanus.net/codrops/2011/01/03/parallax-slider/
• 另一个具有不同效果的教程http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
• 一个库来做视差https://github.com/cameronmcefee/plax
• 另一个图书馆https://github.com/markdalgleish/stellar.js

你可能也喜欢这个:

• http://johnpolacek.github.com/scrollorama/
• http://joelb.me/scrollpath/