何為滾動(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)。但是使用background-attachment也可以做到這樣的效果。
????要了解background-attachment的作用可以參考我的另一篇關(guān)于它的簡(jiǎn)單介紹：
????使用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)：
關(guān)鍵 CSS：
效果如下：
嗯？有點(diǎn)神奇，為什么會(huì)是這樣呢？可能很多人會(huì)和我一樣，第一次接觸這個(gè)屬性對(duì)這樣的效果感到懵逼。
我們把上面background-attachment: fixed注釋掉，或者改為background-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ì)是怎么樣呢？
效果如下：
結(jié)合這張 GIF，相信能對(duì)background-attachment: fixed有個(gè)更深刻的認(rèn)識(shí)，移動(dòng)的只有視口，而背景圖是一直固定死的。
綜上，就是 CSS 使用background-attachment: fixed實(shí)現(xiàn)滾動(dòng)視差的一種方式，也是相對(duì)而言比較容易的一種。
參考文章：滾動(dòng)視差？CSS 不在話下
