10 個用於創建視差滾動效果的 CSS 和 JavaScript 片段

關於視差設計及其在網絡上的工作方式存在很多混淆。 一般來說，視差設計使用運動來在頁面上創建深度錯覺。

這可能與隨著用戶滾動而移動的背景變化或半固定位置項目有關。 我們已經介紹了來自網站的許多示例，但沒有詳細介紹所涉及的技術。

對於這個集合，我選擇了我最喜歡的 CSS 和 JavaScript 片段來創建視差佈局。 所有示例都提供免費源代碼，因此您可以使用代碼片段，甚至在您自己的項目中使用它們。

1. CJ Gammon的大墮落

這個視差示例是我發現的最獨特的界面之一。 它使用一個自定義腳本來創建一個瀑布精靈，它似乎在頁面上無休止地流動。 它建立在通過 JavaScript 控制的畫布元素上，因此它是一個非常技術性的設置。

在大多數情況下，這證明了現代 Web 開發中的可能性。 學習畫布元素可以讓您對設計有很大的控制權。

看看 CJ Gammon 筆下的大瀑布

2. Sebastian Schepis 的CSS 滾動視差

這是一個更實用的視差效果，具有固定的背景和較大的頁面。 滾動時，每個頁面部分都會顯示在背景上方。 這會產生深度錯覺，這是出色視差設計的關鍵要素之一。

開發人員 Sebastian Schepis 在這個頁面上只使用了 CSS，這是一個非常簡單的概念。 我認為任何人都可以輕鬆克隆它，更不用說背景設計可以大大增強。

請參閱 Sebastian Schepis 的 Pen CSS 滾動視差效果

3. Renan Breno 的簡單圖像標籤視差

您經常會發現視差設計與大型全屏背景圖像相結合。 這些在公司網站和初創公司中都很常見，它們通常以一定的視差“滾動速度”為背景。

這裡的區別並不在於您向下滾動頁面的速度或圖像放置的大小。 相反，您會看到滾動時圖像在頁面背景中移動的速度。 這是一種微妙的視差效果，但這種佈局是查看不同動畫速度的絕佳模板。

查看 Renan Breno 的 Pen Simple Image Tag Parallax

4. 視差和固定圖像背景

固定圖像背景可以很好地分割頁面並均勻劃分內容部分。 當您滾動時，感覺各個頁面部分高於背景圖像。 這一切都是為了在滾動時為視差效果注入活力。

我不會使用這種精確的佈局，因為內容區域看起來有點薄。 但是，如果您確實喜歡這種風格，我建議您使用與您的網站相關的不同圖像來標點每個頁面部分。

查看 chaobu 的 Pen #Maincode Hackdays

5. Paulo Cunha 的CSS Parallax

這個視差示例是視差效果如何工作的獨特示例。 所有頁面內容都位於一個大型英雄圖像下方，該圖像在滾動內容下方消失。 這也使用固定的圖像位置使其看起來好像頁面在圖像上移動，而不是圖像保持在原位。

您可以在長滾動佈局中使用相同的效果，並且它具有相似的設計風格。 這對於帶有大型特色圖片的單個博客文章或使用大型英雄來吸引註意力的登陸頁面最有效。

請參閱 Paulo Cunha 的 Pen CSS Parallax

6. Katie Rogers 的視差設計

這是示例婚禮頁面的有趣視差設計。 它具有分頁設計，其中圖像通過視差固定滾動將許多不同的內容區域分開。 一切都在 CSS 上運行，這是一種很好的觸感，並且所有背景圖像在向下移動頁面時保持固定。

這種效果之所以有效，是因為內容區域的背景上有大框陰影。 自然地，這通過為頁面提供理論光源和層次結構來創造深度錯覺——對於單頁佈局來說，這是一個非常好的想法。

查看 Katie Rogers 的 Pen Parallax Design

7. Rich Howell的滾動背景圖像視差

早些時候，我提到了滾動速度如何根據背景位置的變化率而變化。 這個例子是一個完美的比較，看看它是如何工作的。

請注意，您需要使用滾動條來查看此示例的效果。 我嘗試使用鼠標滾輪並沒有看到任何差異，但是當您移動滾動條時，您會注意到列之間的速度變化。

這些速度都不是對視差設計的錯誤或不准確描述。 它們只是在頁面上創建運動的不同方法，這個小示例是可視化許多選項的好方法。

參見 Rich Howell 的 Pen Scrolling Background-Image Paralax

8. Saransh Sinha 的星空視差背景

雖然這種效果與滾動無關，但它直接與視差設計有關。 它使用純 CSS 在頁面背景中創建視差星形動畫。 您可以在頁面上添加文本甚至內容區域，但星形乍一看會立即創建深度。

動畫通過 CSS 運行，但此代碼段使用 Sass 和 Compass，因此在進行編輯之前了解它會有所幫助。

請參閱 Saransh Sinha 的 CSS 中的 Pen Parallax Star 背景

9. Jack Rugile 的Canvas Parallax Skyline

有時，視差設計還針對鼠標移動以及滾動功能。 這種畫佈設計創造了一個無盡的天際線效果，對頁面上的鼠標移動做出反應。 當您重新定位鼠標時，視角會發生變化。 但動畫保持不變，您可以看到這個天際線以清晰的視覺層次移動。

當然，這確實需要 JavaScript 來製作動畫，因為這是一個非常複雜的想法。 但這也不是您在許多網站上都能找到的東西，因此您也不會將其複製到您的網站上。 但作為一個視差概念，這個真的很有趣。

查看 Jack Rugile 的 Pen Canvas Parallax Skyline

10. Bajjy Xilo 的破碎玻璃過濾器

我以前在網站上看到過這種效果，創造了一個非常奇特的設計。 破碎的玻璃濾鏡給人一種背景圖像被分割成許多不同部分的錯覺。 圖像幾乎看起來像是在一塊玻璃上，它破碎了，使圖像破裂並扭曲了圖像。

您可以使用純 CSS 複製這種效果，它是一種很酷的簡潔效果，但除了花哨的設計之外可能沒有任何實際的、真實的用途。 儘管如此，這仍然是滾動時視差深度和運動的一個令人印象深刻的例子。

請參閱 Bajjy Xilo 的 Pen BrokenGlass css 過濾器