如何實現這種背景滾動效果？

Question

我非常喜歡每個背景部分彼此重疊並向下滾動的方式。 我看過很多事情：這是鏈接： http : //www.soleilnoir.net/believein/

任何想法如何達到類似的效果？

謝謝

Answer 1

這種效果稱為視差 。

以下是與此效果相關的一些鏈接：

• 耐克的精彩演示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
}

我確信可以對此進行更好的優化，但這應該足以開始。