滾動視差效果background-attachment實戰記錄

2024-07-11 08:28:29

字體：大中小

來源：轉載

供稿：網友

滾動視差效果的實現原理是在同一個頁面上將頁面元素分為多層，例如可以分為背景、內容、貼圖層，在滾動頁面的時候讓三者滾動的速度不一，從而在人的視覺上能夠形成一種立體的近似效果。最近在做一個項目wiki的時候要用到滾動視差的東西，所以順便記錄一下。一般來說背景層是滾動里面最慢的，內容層可以和頁面的滾動速度一致。

較為簡單的滾動視差效果兩層就可以了，一個背景，然后在背景上滾動內容。CSS中用來定義背景滾動屬性的是background-attachment屬性，具體取值如下：

•scroll: 默認值。背景圖像會隨著頁面其余部分的滾動而移動。
•fixed: 當頁面的其余部分滾動時，背景圖像不會移動。
•inherit: 規定應該從父元素繼承 background-attachment 屬性的設置。
•初始值: scroll
•繼承性: 否
•適用于: 所有元素

在body中定義背景圖像以及屬性時設置背景為固定，那么在背景上的內容就可以相對進行滑動，就能夠初步實現一個滾動視差的效果。

復制代碼

代碼如下:
body{
text-align:center;
background-attachment:fixed;
}

不過CSS雖然簡單但是實現的效果確實是很有限的。一個貌似只能做出兩個圖層的效果。

另一種用CSS實現滾動視差的做法是用百分比對頁面中的元素進行定位，從而在調整頁面大小的時候能夠出現元素間相對移動的效果。當然，如果加上CSS3中的transition能夠使得背景進行移動的話也能夠實現動態的滾動效果。有興趣的可以去一試。

所以說滾動視差的實現實現最好的還是JS進行，比如JQUERY的很多插件就實現了這么些的功能。

上一篇：CSS控制背景圖像平鋪實現邊框陰影效果

下一篇：CSS 控制因Html頁面高度導致抖動的問題解決方法