我們在瀏覽一些網頁時，經常會看到像上面一樣的網頁交互效果，是不是很酷炫，高級感滿滿呢！靜態的網頁是枯燥的，必要時在頁面上加入一些網頁特效，這樣訪客在瀏覽網站時就不會變得沉悶，現在的WEB技術已經很成熟，網絡上有各種各樣的JS插件或直接使用CSS3都能實現一些小特效，而較為搶眼又實用的特效非滾動視差莫屬，通過滾動視差特效可以做出酷炫的展示效果，還能實現非常有趣味性的網頁。
這就是本文要介紹的視差滾動（Parallax Scrolling），視差滾動效果現在在互聯網上越來越流行了。那么，什么是視差滾動效果？它其實就是利用圖片形成不同的層，分別以不同的速度，不同的方向移動產生的效果。這會產生出很奇妙的視覺效果，能有力的吸引住瀏覽者的目光。下面我們就介紹利用CSS怎么來實現視差滾動的效果。
視差滾動是指多層背景網頁元素在滾動時呈現出不同的滾動速度，可以讓頁面元素以不同的速度移動，從而創造出一種視覺上的層次感，形成立體的運動效果，給用戶一種仿佛置身于三維空間的感覺，帶來非常出色的視覺體驗。
網頁解析成：背景層、內容層、懸浮層。
當滾動鼠標滑輪的時候，各個圖層以不同的速度移動，形成視覺差的效果。
通常而言，視差滾動在前端需要輔助 Javascript 才能實現，其原理主要依賴于CSS的transform屬性和scroll事件。通過對不同元素設置不同的滾動速度，可以實現在滾動頁面時，各元素以不同的速度移動。同時，結合JavaScript的window.scrollY或window.pageYOffset屬性，可以實時獲取頁面的滾動位置，從而控制元素的滾動效果。當然，其實 CSS 在實現滾動視差效果方面，也有著不俗的能力。
使用CSS形式實現視覺差滾動效果的需要使用background-attachment。
background-attachment的作用是設置背景圖像是否固定或者隨著頁面的其余部分滾動。默認值為scroll。
屬性值有如下5個：
scroll
| 背景圖片隨著頁面的滾動而滾動，這是默認的 |
| fixed | 背景圖片不會隨著頁面的滾動而滾動 |
| local | 背景圖片會隨著元素內容的滾動而滾動 |
| initial | 設置該屬性的默認值 |
| inherit | 指定 background-attachment 的設置應該從父元素繼承 |
可以看到，fixed值的作用是背景圖片不會隨著頁面的滾動而滾動。對，沒錯，要想實現視覺滾動差的效果，我們就需要將background-attachment屬性設置為fixed，讓背景相對于視口固定。即使一個元素有滾動機制，背景也不會隨著元素的內容而滾動。也就是說，背景一開始就已經被固定在初始的位置。
上代碼：
<style>
body, html {
margin: 0;
}
div {
height: 100vh;
text-align: center;
}
.content-box {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 50px;
font-weight: 600;
}
.img-box {
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.img1 {
background-image: url(./image/img-1.jpg);
}
.img2 {
background-image: url(./image/img-2.jpg);
}
.img3 {
background-image: url(./image/img-3.jpg);
}
.img4 {
background-image: url(./image/img-4.jpg);
}
</style>
<body>
<div class="img-box img1"></div>
<div class="content-box">
<p>真正的程序員不會在上午9：00到下午5：00之間工作，</p>
<p>如果你看到他在上午9：00工作，這表現他從昨晚一直干到現在。</p>
</div>
<div class="img-box img2"></div>
<div class="content-box">
<p>優秀的代碼是它自己最好的文檔，當你考慮要添加一個注釋時，</p>
<p>問問自己，如何能改進這段代碼，以讓它不需要注釋？</p>
</div>
<div class="img-box img3"></div>
<div class="content-box">
<p>程序員是值得尊敬的，程序員的雙手是魔術師的雙手，</p>
<p>他們把枯燥無味的代碼變成了豐富多彩的軟件。</p>
</div>
<div class="img-box img4"></div>
<div class="content-box">
<p>理論是你知道是這樣，但它卻不好用。實踐是它很好用，但你不知道是為什么。</p>
<p>程序員將理論和實踐結合到一起：既不好用，也不知道是為什么。</p>
</div>
</body>
效果：
我們可以在稍加改造，只保留背景層。
<style>
body, html, p {
margin: 0;
}
.img-box {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
text-align: center;
background-attachment: fixed;
background-size: cover;
background-position: center center;
font-size: 50px;
font-weight: 600;
}
.img1 {
background-image: url(./image/img-1.jpg);
}
.img2 {
background-image: url(./image/img-2.jpg);
}
.img3 {
background-image: url(./image/img-3.jpg);
}
.img4 {
background-image: url(./image/img-4.jpg);
}
<body>
<div class="img-box img1">
<p>真正的程序員不會在上午9：00到下午5：00之間工作，</p>
<p>如果你看到他在上午9：00工作，這表現他從昨晚一直干到現在。</p>
</div>
<div class="img-box img2">
<p>優秀的代碼是它自己最好的文檔，當你考慮要添加一個注釋時，</p>
<p>問問自己，如何能改進這段代碼，以讓它不需要注釋？</p>
</div>
<div class="img-box img3">
<p>程序員是值得尊敬的，程序員的雙手是魔術師的雙手，</p>
<p>他們把枯燥無味的代碼變成了豐富多彩的軟件。</p>
</div>
<div class="img-box img4">
<p>理論是你知道是這樣，但它卻不好用。實踐是它很好用，但你不知道是為什么。</p>
<p>程序員將理論和實踐結合到一起：既不好用，也不知道是為什么。</p>
</div>
</body>
效果如下：
當然，實現視差滾動還有其它方式，比如transform:translate3D，jquery中比如jQuery Parallux插件，vue中vue-parallax等插件都可以實現類似的效果，感興趣可以自己研究一下。
該文章在 2024/3/26 18:38:47 編輯過
400 186 1886
