如何建立一個視差滾動，其中背景圖像一旦滾動到和內容移動

有一個具體的網站有這種效果，我想知道如果任何人都可以指向我一個很好的教程來實現類似的效果。該網站是http://www.royalsalute.com/en/whisky。我很想知道如何讓背景圖像div粘貼到頂部，讓內容與頁面滾動，然後讓新的背景圖像粘到頂部，一旦用戶到達那裏...如何建立一個視差滾動，其中背景圖像一旦滾動到和內容移動

思考？

來源

2014-04-11 Sarah Morrow

我認爲你要找的是背景附件樣式。

這是一個小提琴，它顯示了這個概念。

http://jsfiddle.net/Lq7zH/

基本上你把你複製另一個父div中，然後設置父div的背景圖片，背景大小：封面，背景附件：固定;

所以HTML

<div class="sticky-div"> 
    <p>Lots of copy here or other divs or whatever</p> 
</div>

CSS

.sticky-div { 
    background-image: url(someimage.jpg); 
    background-size: cover // ensures it fills the space 
    background-attachment: fixed // Makes the background static, as in it doesn't scroll

來源

2014-04-11 20:03:10 trattles

但是，當你想擁有多背景圖片進來，在各個點會發生什麼。 –

對不起，我直到現在纔看到你的回覆：P我相信你已經解決了它。無論如何，如果你想有幾個不同的背景圖像進來，那麼你只需使用上述技術對多個div進行分層。查看http://www.slaphands.com/process/的例子。基本上你必須記住的是，即使該圖像看起來並不像它正在移動，它實際上是div。所以當你到達那個div的末尾時，下一個會進來。 – trattles

如何建立一個視差滾動，其中背景圖像一旦滾動到和內容移動

回答

相關問題