摘要：可以感受下種不同取值的不同效果使用實(shí)現(xiàn)滾動(dòng)視差首先，我們使用來實(shí)現(xiàn)滾動(dòng)視差。

何為滾動(dòng)視差

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

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

?

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

background-attachment?算是一個(gè)比較生僻的屬性，基本上平時(shí)寫業(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?來實(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)。也就是說，背景圖從一開始就已經(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)來了：

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

好，我們?cè)賮碓囈幌拢绻阉?.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?本身的效果并不僅只是能有用來實(shí)現(xiàn)滾動(dòng)視差效果，合理運(yùn)用，還可以實(shí)現(xiàn)其他很多有趣的效果，這里簡單再列一個(gè)：

?

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

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

CodePen Demo -- bg-attachment:fixed Wave

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

上面這個(gè)效果有點(diǎn)瑕疵，圖片在放大容器變大的過程中發(fā)生了明顯的抖動(dòng)。當(dāng)然，效果還是可以的，background-attachment?還有很多有意思的效果可以挖掘。

?

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

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

原理就是：

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

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

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

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

核心代碼表示就是：

    
translateZ(-1)
    
translateZ(-2)
    
translateZ(-3)

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)條，效果如下：

CodePen Demo -- CSS 3D parallax

很明顯，當(dāng)滾動(dòng)滾動(dòng)條時(shí)，不同子元素的位移程度從視覺上看是不一樣的，也就達(dá)到了所謂的滾動(dòng)視差效果。

滾動(dòng)視差文字陰影/虛影效果

那么，運(yùn)用 translate3d 的視差效果，又能有一些什么好玩的效果呢？下面這個(gè)滾動(dòng)視差文字陰影/虛影效果很有意思：

CodePen Demo -- CSS translate3d Parallax

當(dāng)然，通過調(diào)整參數(shù)（perspective: ?px?以及?transform: translateZ(-?px);），還能有其他很有意思的效果出現(xiàn)：

CodePen Demo -- CSS translate3d Parallax 2

是不是很有電影開片的廠商 LOGO 的特效的感覺??。

師父領(lǐng)進(jìn)門，修行在個(gè)人，怎么制作更好更有意思的效果還是需要花時(shí)間鉆研和琢磨，這里我僅僅是拋磚引玉，希望能見到更多 Nice 的效果。

?

最后

感謝耐心讀完。更多精彩 CSS 技術(shù)文章匯總在我的?Github -- iCSS?，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

好了，本文到此結(jié)束，希望對(duì)你有幫助 :)

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

?

?