滾動視差？CSS 不在話下

何爲滾動視差

視差滾動（Parallax Scrolling）是指讓多層背景以不一樣的速度移動，造成立體的運動效果，帶來很是出色的視覺體驗。 做爲網頁設計的熱點趨勢，愈來愈多的網站應用了這項技術。

一般而言，滾動視差在前端須要輔助 Javascript 才能實現。固然，其實 CSS 在實現滾動視差效果方面，也有着不俗的能力。下面就讓咱們來見識一二：

認識 background-attachment

background-attachment 算是一個比較生僻的屬性，基本上平時寫業務樣式都用不到這個屬性。可是它自己頗有意思。

background-attachment：若是指定了 background-image ，那麼 background-attachment 決定背景是在視口中固定的仍是隨着包含它的區塊滾動的。

單單從定義上有點難以理解，隨下面幾個 Demo 瞭解下 background-attachment 究竟是什麼意思：

background-attachment: scroll

scroll 此關鍵字表示背景相對於元素自己固定， 而不是隨着它的內容滾動。

background-attachment: local

local 此關鍵字表示背景相對於元素的內容固定。若是一個元素擁有滾動機制，背景將會隨着元素的內容滾動， 而且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框。

background-attachment: fixed

fixed 此關鍵字表示背景相對於視口固定。即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。

注意一下 scroll 與 fixed，一個是相對元素自己固定，一個是相對視口固定，有點相似 position 定位的 absolute 和 fixed。

能夠感覺下 3 種不一樣取值的不一樣效果：

CodePen Demo -- bg-attachment Demo

使用 background-attachment: fixed 實現滾動視差

首先，咱們使用 background-attachment: fixed 來實現滾動視差。fixed 此關鍵字表示背景相對於視口固定。即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。

這裏的關鍵在於，即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。也就是說，背景圖從一開始就已經被固定死在初始所在的位置。

咱們使用，圖文混合排布的方式，實現滾動視差，HTML 結構以下，.g-word 表示內容結構，.g-img 表示背景圖片結構：

<section class="g-word">Header</section>
<section class="g-img">IMG1</section>
<section class="g-word">Content1</section>
<section class="g-img">IMG2</section>
<section class="g-word">Content2</section>
<section class="g-img">IMG3</section>
<section class="g-word">Footer</section>
複製代碼

關鍵 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

嗯？有點神奇，爲何會是這樣呢？可能不少人會和我同樣，第一次接觸這個屬性對這樣的效果感到懵逼。

咱們把上面 background-attachment: fixed 註釋掉，或者改成 background-attachment: local，再看看效果：

CodePen Demo -- bg-attachment:local

此次，圖片正常跟隨滾動條滾動了，按常理，這種效果才符合咱們大腦的思惟。

而滾動視差效果，正是不按常理出牌的一個效果，重點來了：

當頁面滾動到圖片應該出現的位置，被設置了 background-attachment: fixed 的圖片並不會繼續跟隨頁面的滾動而跟隨上下移動，而是相對於視口固定死了。

好，咱們再來試一下，若是把全部 .g-word 內容區塊都去掉，只剩下所有設置了 background-attachment: fixed 的背景圖區塊，會是怎麼樣呢？

HTML 代碼以下：

<section class="g-img">IMG1</section>
<section class="g-img">IMG2</section>
<section class="g-img">IMG3</section>
複製代碼

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}
複製代碼

效果以下：

CodePen Demo

結合這張 GIF，相信能對 background-attachment: fixed 有個更深入的認識，移動的只有視口，而背景圖是一直固定死的。

綜上，就是 CSS 使用 background-attachment: fixed 實現滾動視差的一種方式，也是相對而言比較容易的一種。固然，background-attachment: fixed 自己的效果並不只只是能有用來實現滾動視差效果，合理運用，還能夠實現其餘不少有趣的效果，這裏簡單再列一個：

background-attachment: fixed 實現圖片點擊水紋效果

利用圖片相對視口固定，能夠有不少有趣的效果，譬以下面這個，來源於這篇文章CSS Water Wave (水波效果)：

CodePen Demo -- bg-attachment:fixed Wave

利用圖片相對視口固定的特性實現點擊的水紋效果。

上面這個效果有點瑕疵，圖片在放大容器變大的過程當中發生了明顯的抖動。固然，效果仍是能夠的，background-attachment 還有不少有意思的效果能夠挖掘。

使用 transform: translate3d 實現滾動視差

言歸正傳，下面介紹另一種使用 CSS 實現的滾動視差效果，利用的是 CSS 3D。

原理就是：

1. 咱們給容器設置上 transform-style: preserve-3d 和 perspective: xpx，那麼處於這個容器的子元素就將位於3D空間中，

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

3. 滾動滾動條，因爲子元素設置了不一樣的 transform: translateZ()，那麼他們滾動的上下距離 translateY 相對屏幕（咱們的眼睛），也是不同的，這就達到了滾動視差的效果。

關於 transform-style: preserve-3d 以及 perspective 本文不作過多篇幅展開，默認讀者都有所瞭解，還不是特別清楚的，能夠先了解下 CSS 3D。

核心代碼表示就是：

<div class="g-container">
    <div class="section-one">translateZ(-1)</div>
    <div class="section-two">translateZ(-2)</div>
    <div class="section-three">translateZ(-3)</div>
</div>
複製代碼

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);
    }
}

複製代碼

總結就是父元素設置 transform-style: preserve-3d 和 perspective: 1px，子元素設置不一樣的 transform: translateZ，滾動滾動條，效果以下：

CodePen Demo -- CSS 3D parallax

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

滾動視差文字陰影/虛影效果

那麼，運用 translate3d 的視差效果，又能有一些什麼好玩的效果呢？下面這個滾動視差文字陰影/虛影效果頗有意思：

CodePen Demo -- CSS translate3d Parallax

固然，經過調整參數（perspective: ?px 以及 transform: translateZ(-?px);），還能有其餘頗有意思的效果出現：

CodePen Demo -- CSS translate3d Parallax 2

是否是頗有電影開片的廠商 LOGO 的特效的感受 :joy: 。

師父領進門，修行在我的，怎麼製做更好更有意思的效果仍是須要花時間鑽研和琢磨，這裏我僅僅是拋磚引玉，但願能見到更多 Nice 的效果。

最後

感謝耐心讀完。更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

好了，本文到此結束，但願對你有幫助 :)

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。