Q

驚人的CSS Div滾動效果，無法解釋，提供的鏈接。這是一個網頁設計問題，如何得到這樣的效果？

2012-10-05 18 views 1 likes

1

這裏是我想要顯示的示例網站的鏈接Smokey Bones Menu。向下滾動頁面，看看div如何相互重疊，但比這更復雜，因爲實際頁面也滾動。任何人都可以幫助回答如何達到這種效果？驚人的CSS Div滾動效果，無法解釋，提供的鏈接。這是一個網頁設計問題，如何得到這樣的效果？

2012-10-05 Muhammed Bhikha

+0

如果您使用Web開發工具（如Chrome或Firebug），您可以看到它們正在滾動時更改背景圖像的位置。 – Laurence

+0

實際上他們正在使用CSS的部分和最有可能的jQuery實現來更改滾動位置上每個部分的背景位置。你可以看到他們在資源>腳本 –

+0

下有一個Java腳本插件，你有什麼想法如何做到這一點？至於它是JavaScript還是純粹的CSS？ –

A

回答

1

這裏的插件做得相當類似的事情：https://github.com/IanLunn/jQuery-Parallax

您可以搜索視差effet在谷歌更多的例子/腳本

希望這有助於！

2012-10-05 20:10:09

4

我假設你指的是盤子的背景。

的影響有兩個組成部分：

一）CSS屬性background-attachment: fixed;。這可以防止背景圖像與div一起滾動。（這不依賴於JavaScript）

b）通過在滾動上略微更改background-position來移動背景的JavaScript。

2012-10-05 20:13:20 Armatus

+0

他們有不同的菜單的每個部分divs，他們堆疊在彼此的頂部，從而給頁面的高度，但有一件事我不明白每個div如何看起來像它的重疊，當一個div到達最後，它開始揭示其他div的開始以及它自己的背景。每個div有一個圖像，頁面沒有一個長圖像 –

+0

'background-attachment：fixed'意味着bg-pictures的位置是相對於瀏覽器而不是元素。想象一下，所有的背景圖片在瀏覽器窗口的底部都是相互重疊的。當bg所屬的div滾動到視圖中時，就像是一個可以讓你在其位置查看bg的孔掩模。「重疊」實際上是由圖片造成的錯覺 - 它們的邊緣是「流血」，即它們切斷了您的大腦插入的感興趣的對象，並且有更多的感覺，但是您看不到它。 – Armatus

相關問題