柚子快報邀請碼778899分享：前端 CSS 實現(xiàn)視差滾動效果
柚子快報邀請碼778899分享：前端 CSS 實現(xiàn)視差滾動效果
一、是什么
視差滾動（Parallax Scrolling）是指多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗
我們可以把網(wǎng)頁解刨成：背景層、內(nèi)容層、懸浮層
當(dāng)滾動鼠標(biāo)滑輪的時候，各個圖層以不同的速度移動，形成視覺差的效果
二、實現(xiàn)方式 使用css形式實現(xiàn)視覺差滾動效果的方式有：
● background-attachment ● transform:translate3D
background-attachment 作用是設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動
值分別有如下：
● scroll：默認(rèn)值，背景圖像會隨著頁面其余部分的滾動而移動 ● fixed：當(dāng)頁面的其余部分滾動時，背景圖像不會移動 ● inherit：繼承父元素background-attachment屬性的值
完成滾動視覺差就需要將background-attachment屬性設(shè)置為fixed，讓背景相對于視口固定。及時一個元素有滾動機制，背景也不會隨著元素的內(nèi)容而滾動
也就是說，背景一開始就已經(jīng)被固定在初始的位置
核心的css代碼如下：
section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
整體例子如下：
transform:translate3D 同樣，讓我們先來看一下兩個概念transform和perspective：
● transform: css3 屬性，可以對元素進(jìn)行變換(2d/3d)，包括平移 translate,旋轉(zhuǎn) rotate,縮放 scale,等等 ● perspective: css3 屬性，當(dāng)元素涉及 3d 變換時，perspective 可以定義我們眼睛看到的 3d 立體效果，即空間感 3D視角示意圖如下所示：
舉個例子：
這種方式實現(xiàn)視覺差動的原理如下：
● 容器設(shè)置上 transform-style: preserve-3d 和 perspective: xpx，那么處于這個容器的子元素就將位于3D空間中，
● 子元素設(shè)置不同的 transform: translateZ()，這個時候，不同元素在 3D Z軸方向距離屏幕（我們的眼睛）的距離也就不一樣
● 滾動滾動條，由于子元素設(shè)置了不同的 transform: translateZ()，那么他們滾動的上下距離 translateY 相對屏幕（我們的眼睛），也是不一樣的，這就達(dá)到了滾動視差的效果
柚子快報邀請碼778899分享：前端 CSS 實現(xiàn)視差滾動效果
相關(guān)文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Fordeal特惠出海行
