CSS滾動視差

標籤：技術分享   ges   src   css   attach   javascrip   loaded   round   怎麼   

何為滾動視差

    視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。 作為網頁設計的熱點趨勢，越來越多的網站應用程式了這項技術。

    通常而言，滾動視差在前端需要輔助 Javascript 才能實現。但是使用background-attachment也可以做到這樣的效果。

    要瞭解background-attachment的作用可以參考我的另一篇關於它的簡單介紹：

    什麼是background-attachment

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

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

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

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

 

 

關鍵 CSS：

 

 

效果如下：

 

 

嗯？有點神奇，為什麼會是這樣呢？可能很多人會和我一樣，第一次接觸這個屬性對這樣的效果感到懵逼。

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

 

這次，圖片正常跟隨捲軸滾動了，按常理，這種效果才符合我們大腦的思維。

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

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

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

效果如下：

 

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

綜上，就是 CSS 使用background-attachment: fixed實現滾動視差的一種方式，也是相對而言比較容易的一種。

參考文章：滾動視差？CSS 不在話下

CSS滾動視差