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

我非常喜欢每个背景部分相互重叠的方式，向下滚动。 我看到它做了很多：这里是链接： 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/

Answer 2

您可以通过观察滚动偏移位置然后基于该滚动位置动画化不同元素的组合来实现这一点。 您可以设置一个事件监听器，并在某些位置触发函数以将元素设置到页面上。

如果使用jQuery，就像这样：

$(document).on("scroll", checkScrollPosition); function checkScrollPosition() { var scrollPos = $(window).scrollTop(); switch (scrollPos) { case (500): doSomething(); break; case (1000): doSomethingElse(); break; } } function() doSomething { // use animate to animate element(s) at 500 } function() doSomethingElse { // use animate to animate element(s) at 1000 } 

我确信可以比这更优化，但这应该足以开始。