javascript - 如何实现这种背景滚动效果？

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/ )
• 梅赛德斯 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
}

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