干貨來了｜滾動(dòng)視差？CSS 不在話下

1、干貨來了滾動(dòng)視差？css 不在話下何為滾動(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)。固然，其實(shí) css 在實(shí)現(xiàn)滾動(dòng)視差效果方面，也有著不俗的能力。下面就讓我們來見識(shí)一二：熟悉 background-attachmentbackground-attachment 算是一個(gè)比較生僻的屬性，基本上平常寫業(yè)務(wù)樣式都用不到這個(gè)屬性。但是它本身很故意思。background-attachment：假

2、如指定了 background-image ，那么 background-attachment 打算背景是在視口中固定的還是隨著包含它的區(qū)塊滾動(dòng)的。單單從定義上有點(diǎn)難以理解，隨下面幾個(gè) demo 了解下 background-attachment 到底是什么意思：background-attachment: scrollscroll 此關(guān)鍵字表示背景相對(duì)于元素本身固定， 而不是隨著它的內(nèi)容滾動(dòng)。background-attachment: locallocal 此關(guān)鍵字表示背景相對(duì)于元素的內(nèi)容固定。假如一個(gè)元素?fù)碛袧L動(dòng)機(jī)制，背景將會(huì)隨著元素的內(nèi)容滾動(dòng)， 并且背景的繪制區(qū)域和定位區(qū)域是相對(duì)于可滾

3、動(dòng)的區(qū)域而不是包含他們的邊框。background-attachment: fixedfixed 此關(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（https:/codepen.io/chokcoco/pen/xjjorg）用法 background-attachment: fixed 實(shí)

4、現(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)：headerimg1content1img2content2img3footer關(guān)鍵 css：section height: 100vh;.g-img

5、 background-image: url(.);background-attachment: fixed;background-size: cover;background-position: center center;效果如下： codepen demo — https:/codepen.io/chokcoco/pen/jbaqoy（https:/codepen.io/chokcoco/pen/jbaqoy）嗯？有點(diǎn)奇特，為什么會(huì)是這樣呢？可能無數(shù)人會(huì)和我一樣，第一次接觸這個(gè)屬性對(duì)這樣的效果感到懵逼。我們把上面 background-attachment: fixed 注釋

6、掉，或者改為 background-attachment: local，再看看效果： codepen demo — bg-attachment:local（https:/codepen.io/chokcoco/pen/zjmdjz）這次，正常尾隨滾動(dòng)條滾動(dòng)了，按常理，這種效果才符合我們大腦的思維。而滾動(dòng)視差效果，正是不按常理出牌的一個(gè)效果，重點(diǎn)來了：當(dāng)頁面滾動(dòng)到應(yīng)當(dāng)浮現(xiàn)的位置，被設(shè)置了 background-attachment: fixed 的并不會(huì)繼續(xù)尾隨頁面的滾動(dòng)而尾隨上下移動(dòng)，而是相對(duì)于視口固定死了。好，我們?cè)賮碓囈幌?，假如把全?.g-word 內(nèi)容區(qū)塊都去掉，只剩下所有

7、設(shè)置了 background-attachment: fixed 的背景圖區(qū)塊，會(huì)是怎么樣呢？html 代碼如下：img1img2img3section height: 100vh;.g-img background-image: url(.);background-attachment: fixed;background-size: cover;background-position: center center;效果如下： codepen demo（https:/codepen.io/chokcoco/pen/omprgz）結(jié)合這張 gif，信任能對(duì) background-attachme

8、nt: fixed 有個(gè)更深刻的熟悉，移動(dòng)的惟獨(dú)視口，而背景圖是向來固定死的。綜上，就是 css 用法 background-attachment: fixed 實(shí)現(xiàn)滾動(dòng)視差的一種方式，也是相對(duì)而言比較簡(jiǎn)單的一種。固然，background-attachment: fixed 本身的效果并不僅只是能實(shí)用來實(shí)現(xiàn)滾動(dòng)視差效果，合理運(yùn)用，還可以實(shí)現(xiàn)其他無數(shù)好玩的效果，這里容易再列一個(gè)：background-attachment: fixed 實(shí)現(xiàn)點(diǎn)擊水紋效果利用相對(duì)視口固定，可以有無數(shù)好玩的效果，譬如下面這個(gè)，來源于這篇文章css water wave (水波效果)： codepen demo &m

9、dash; bg-attachment:fixed wave（https:/codepen.io/chokcoco/pen/wxyzwo）利用相對(duì)視口固定的特性實(shí)現(xiàn)點(diǎn)擊的水紋效果。上面這個(gè)效果有點(diǎn)瑕疵，在放大容器變大的過程中發(fā)生了顯然的顫動(dòng)。固然，效果還是可以的，background-attachment 還有無數(shù)故意思的效果可以挖掘。用法 transform: translate3d 實(shí)現(xiàn)滾動(dòng)視差言歸正傳，下面介紹另外一種用法 css 實(shí)現(xiàn)的滾動(dòng)視差效果，利用的是 css 3d。原理就是： 我們給容器設(shè)置上 transform-style: preserve-3d 和 perspective

10、: xpx，那么處于這個(gè)容器的子元素就將位于3d空間中， 再給子元素設(shè)置不同的 transform: translatez()，這個(gè)時(shí)候，不同元素在 3d z軸方向距離屏幕（我們的眼睛）的距離也就不一樣 滾動(dòng)滾動(dòng)條，因?yàn)樽釉卦O(shè)置了不同的 transform: translatez()，那么他們滾動(dòng)的上下距離 translatey 相對(duì)屏幕（我們的眼睛），也是不一樣的，這就達(dá)到了滾動(dòng)視差的效果。 關(guān)于 transform-style: preserve-3d 以及 perspective 本文不做過多篇幅綻開，默認(rèn)讀者都有所了解，還不是特殊清晰的，可以先了解下 css 3d。核心代碼表示就是：

11、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-thre

12、e transform: translatez(-3px);總結(jié)就是父元素設(shè)置 transform-style: preserve-3d 和 perspective: 1px，子元素設(shè)置不同的 transform: translatez，滾動(dòng)滾動(dòng)條，效果如下： codepen demo — css 3d parallax（https:/codepen.io/chokcoco/pen/epoerm）很顯然，當(dāng)滾動(dòng)滾動(dòng)條時(shí)，不同子元素的位移程度從視覺上看是不一樣的，也就達(dá)到了所謂的滾動(dòng)視差效果。滾動(dòng)視差文字陰影/虛影效果那么，運(yùn)用 translate3d 的視差效果，又能有一些什么有趣的效果呢？下面這個(gè)滾動(dòng)視差文字陰影/虛影效果很故意思： codepen demo — css translate3d parallax（https:/codepen.io/chokcoco/pen/xbgbbp）固然，通過調(diào)節(jié)參數(shù)（perspective: ?px 以及 transform: translatez(-?px);），還能有其他很故意思的效果浮現(xiàn)： codepen demo &md