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

我真的很喜歡每個背景部分相互重疊的方式，它們向下滾動。我已經看到它做了很多：這裏是鏈接：http://www.soleilnoir.net/believein/如何實現這種背景滾動效果？

任何想法如何實現類似的效果？

感謝

2012-04-22 aurel

我問，在這裏有很多像這樣的問題。這個問題是相同的話題：http://stackoverflow.com/questions/6386675/how-can-i-achieve-this-effect-with-jquery – aurel 2012-04-22 15:38:43

其閃光和它的複雜。此外，你問的是整個父親的情況，這根本不是一個特定的效果。 – 2012-04-22 15:44:38

我沒有意識到這是整個網站（只問了背景）真的很抱歉。 – aurel 2012-04-22 15:47:51

該效果被稱爲視差。

下面是有關這種效果的一些鏈接：

從耐克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=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

你也可以像這樣：

來源

2012-04-22 19:21:17 pomeh

非常感謝所有這些偉大的信息 – aurel 2012-04-22 20:12:29

我想我會拋出鏈接到[HTML5Rocks Paralax文章]（ http://www.html5rocks.com/en/tutorials/speed/parallax/）。 – MattH 2013-03-26 23:09:45

你可以做到這一點通過觀察滾動偏移位置，然後根據該滾動位置的動畫不同元素的組合。您可以設置一個事件監聽器，並在某些位置使用fire函數來將元素動畫到頁面上。

如果使用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 
}

我敢肯定，可以優化比這更好的，但應該是足夠的上手。

來源

2012-04-22 19:06:28 LocalPCGuy

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

回答

相關問題