何為滾動(dòng)視差

視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺(jué)體驗(yàn)。 作為網(wǎng)頁(yè)設(shè)計(jì)的熱點(diǎn)趨勢(shì)，越來(lái)越多的網(wǎng)站應(yīng)用了這項(xiàng)技術(shù)。

通常而言，滾動(dòng)視差在前端需要輔助 Javascript 才能實(shí)現(xiàn)。當(dāng)然，其實(shí) CSS 在實(shí)現(xiàn)滾動(dòng)視差效果方面，也有著不俗的能力。下面就讓我們來(lái)見(jiàn)識(shí)一二：

認(rèn)識(shí) background-attachment

background-attachment 算是一個(gè)比較生僻的屬性，基本上平時(shí)寫(xiě)業(yè)務(wù)樣式都用不到這個(gè)屬性。但是它本身很有意思。

background-attachment：如果指定了 background-image ，那么 background-attachment 決定背景是在視口中固定的還是隨著包含它的區(qū)塊滾動(dòng)的。

單單從定義上有點(diǎn)難以理解，隨下面幾個(gè) Demo 了解下 background-attachment 到底是什么意思：

background-attachment: scroll

scroll 此關(guān)鍵字表示背景相對(duì)于元素本身固定， 而不是隨著它的內(nèi)容滾動(dòng)。

background-attachment: local

local 此關(guān)鍵字表示背景相對(duì)于元素的內(nèi)容固定。如果一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景將會(huì)隨著元素的內(nèi)容滾動(dòng)， 并且背景的繪制區(qū)域和定位區(qū)域是相對(duì)于可滾動(dòng)的區(qū)域而不是包含他們的邊框。

background-attachment: fixed

fixed 此關(guān)鍵字表示背景相對(duì)于視口固定。即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)。

注意一下 scroll 與 fixed，一個(gè)是相對(duì)元素本身固定，一個(gè)是相對(duì)視口固定，有點(diǎn)類似 position 定位的 absolute 和 fixed。

可以感受下 3 種不同取值的不同效果：

CodePen Demo — bg-attachment Demo

使用 background-attachment: fixed 實(shí)現(xiàn)滾動(dòng)視差

首先，我們使用 background-attachment: fixed 來(lái)實(shí)現(xiàn)滾動(dòng)視差。fixed 此關(guān)鍵字表示背景相對(duì)于視口固定。即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)。

這里的關(guān)鍵在于，即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)。也就是說(shuō)，背景圖從一開(kāi)始就已經(jīng)被固定死在初始所在的位置。

我們使用，圖文混合排布的方式，實(shí)現(xiàn)滾動(dòng)視差，HTML 結(jié)構(gòu)如下，.g-word 表示內(nèi)容結(jié)構(gòu)，.g-img 表示背景圖片結(jié)構(gòu)：

Header

IMG1

Content1

IMG2

Content2

IMG3

Footer

關(guān)鍵 CSS：

section {

height: 100vh;

}

.g-img {

background-image: url(...);

background-attachment: fixed;

background-size: cover;

background-position: center center;

}

效果如下：

CodePen Demo — https://codepen.io/Chokcoco/pen/JBaQoY

嗯？有點(diǎn)神奇，為什么會(huì)是這樣呢？可能很多人會(huì)和我一樣，第一次接觸這個(gè)屬性對(duì)這樣的效果感到懵逼。

我們把上面 background-attachment: fixed 注釋掉，或者改為 background-attachment: local，再看看效果：

CodePen Demo — bg-attachment:local

這次，圖片正常跟隨滾動(dòng)條滾動(dòng)了，按常理，這種效果才符合我們大腦的思維。

而滾動(dòng)視差效果，正是不按常理出牌的一個(gè)效果，重點(diǎn)來(lái)了：

當(dāng)頁(yè)面滾動(dòng)到圖片應(yīng)該出現(xiàn)的位置，被設(shè)置了 background-attachment: fixed 的圖片并不會(huì)繼續(xù)跟隨頁(yè)面的滾動(dòng)而跟隨上下移動(dòng)，而是相對(duì)于視口固定死了。

好，我們?cè)賮?lái)試一下，如果把所有 .g-word 內(nèi)容區(qū)塊都去掉，只剩下全部設(shè)置了 background-attachment: fixed 的背景圖區(qū)塊，會(huì)是怎么樣呢？

HTML 代碼如下：

IMG1

IMG2

IMG3

section {

height: 100vh;

}

.g-img {

background-image: url(...);

background-attachment: fixed;

background-size: cover;

background-position: center center;

}

效果如下：

CodePen Demo

結(jié)合這張 GIF，相信能對(duì) background-attachment: fixed 有個(gè)更深刻的認(rèn)識(shí)，移動(dòng)的只有視口，而背景圖是一直固定死的。

綜上，就是 CSS 使用 background-attachment: fixed 實(shí)現(xiàn)滾動(dòng)視差的一種方式，也是相對(duì)而言比較容易的一種。當(dāng)然，background-attachment: fixed 本身的效果并不僅只是能有用來(lái)實(shí)現(xiàn)滾動(dòng)視差效果，合理運(yùn)用，還可以實(shí)現(xiàn)其他很多有趣的效果，這里簡(jiǎn)單再列一個(gè)：

background-attachment: fixed 實(shí)現(xiàn)圖片點(diǎn)擊水紋效果

利用圖片相對(duì)視口固定，可以有很多有趣的效果，譬如下面這個(gè)，來(lái)源于這篇文章CSS Water Wave (水波效果)：

CodePen Demo — bg-attachment:fixed Wave

利用圖片相對(duì)視口固定的特性實(shí)現(xiàn)點(diǎn)擊的水紋效果。

使用 transform: translate3d 實(shí)現(xiàn)滾動(dòng)視差

言歸正傳，下面介紹另外一種使用 CSS 實(shí)現(xiàn)的滾動(dòng)視差效果，利用的是 CSS 3D。

原理就是：

我們給容器設(shè)置上 transform-style: preserve-3d 和 perspective: xpx，那么處于這個(gè)容器的子元素就將位于3D空間中，

再給子元素設(shè)置不同的 transform: translateZ()，這個(gè)時(shí)候，不同元素在 3D Z軸方向距離屏幕（我們的眼睛）的距離也就不一樣

滾動(dòng)滾動(dòng)條，由于子元素設(shè)置了不同的 transform: translateZ()，那么他們滾動(dòng)的上下距離 translateY 相對(duì)屏幕（我們的眼睛），也是不一樣的，這就達(dá)到了滾動(dòng)視差的效果。

關(guān)于 transform-style: preserve-3d 以及 perspective 本文不做過(guò)多篇幅展開(kāi)，默認(rèn)讀者都有所了解，還不是特別清楚的，可以先了解下 CSS 3D。

核心代碼表示就是：

html {

height: 100%;  overflow: hidden;

}

body {

perspective: 1px;

transform-style: preserve-3d;

height: 100%;

overflow-y: scroll;

overflow-x: hidden;

}

.g-container {

height: 150%;

}

.section-one {

transform: translateZ(-1px);

}

.section-two {

transform: translateZ(-2px);

}

.section-three {

transform: translateZ(-3px);

}

總結(jié)就是父元素設(shè)置 transform-style: preserve-3d 和 perspective: 1px，子元素設(shè)置不同的 transform: translateZ，滾動(dòng)滾動(dòng)條，效果如下：