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

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=live（不是真正的视差，但仍然很棒）
• 有关如何使用视差效果制作图像滑块的教程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
}

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