什麼是視差滾動效果？終極指南

有些網頁設計趨勢經得起時間的考驗。我們這裡說的可不是 Comic Sans 和 Flash 動畫——它們就留在 2000 年代初期吧。但視差滾動效果至今仍和 2011 年在網路上嶄露頭角時一樣熱門。

在這篇文章中，我們將逐步說明什麼是視差滾動效果、使用它的好處，以及一些範例，讓您更好地瞭解如何應用它。

讓我們開始吧！

什麼是視差滾動效果？

您是否曾經滾動瀏覽過一個感覺動態的頁面？就像一次滾動瀏覽多個視圖一樣？那就是視差滾動效果，它發生在頁面的不同元素以不同的速度移動時——創造出 3D 深度效果。

通常發生的情況是，背景圖片會保持不動或緩慢移動，而頁面上的圖片和文字則正常滾動。您可以這裡看到它的實際效果。

使用視差滾動效果有什麼好處？

視差滾動效果是豐富網站、展示產品和創造沉浸感的好方法。現在我們對什麼是視差滾動效果有了一些瞭解，讓我們來看看使用它的各種好處。

• 3D 深度：透過分離圖層並以不同的速度移動它們，您可以欺騙用戶的思維，使其感知 3D 深度。
• 規模感：在不同層級上放置更多元素，可以讓您區分它們，並產生一種用 2D 靜態圖像通常難以傳達的規模感。
• 引導使用者焦點：如果您想讓使用者的目光停留在特定元素上，滾動效果可以讓您看似動畫化它周圍的某些或所有其他元素，以保持焦點。
• 區分內容：B2B 網站經常使用視差滾動效果來展示重要的公司產品。這些網站有很多資訊，所以這是區分內容的好方法。
• 現代設計：流暢的設計是現代網頁和行動應用程式美學的一部分，各行各業的公司都遵循這種美學。充分利用滾動效果，讓您的設計保持現代感。

現在您已經瞭解了視差滾動效果的好處，讓我們透過一些範例來看看它們是如何實現的。

視差滾動效果範例

網站

直到 2011 年 HTML5 和 CSS 3 編碼技術的推出，這種視差滾動效果才開始受到網頁設計師的歡迎。現在它們很容易實現，並且讓您的網站看起來更現代、更時尚。

我們展示了我們自己製作的垂直視差滾動效果範例，但这並非網站上唯一的應用案例。其他應用還包括橫向捲動、3D 圖層視差、圖層捲動等等。您可以參考Apple 的 M2 MacBook Air 頁面，即可看到捲動效果的實際應用。

這個 2011 年 Beercamp 的例子是一個非常有創意的視差效果應用，讓人聯想到星際大戰的片尾字幕。雖然對於較為企業化的商業網頁來說，它可能是一個過於搶眼的選項，但對於一個目標是令人難忘且引人入勝的活動來說，它卻能創造奇蹟。

行動應用程式

現在，在所有平台上創建一致的設計變得容易許多，因此隨著視差效果在網站上越來越流行，行動應用程式也跟進採用。圖層捲動和橫向捲動效果在行動應用程式中也非常流行，與垂直捲動效果一樣。目標都是相同的——為您的產品製作高品質、流暢的動畫和效果。

想親自體驗一下嗎？如果您手機上有 Apple 地圖，請打開「環視」街景，並找到一條街道上有特寫物件的街道，例如公車或廂型車。當您移動時，您會看到附近的物件會產生輕微的視差效果，這有助於讓靜態影像感覺更真實。

電玩遊戲

視差效果在電玩遊戲產業中也流行了數十年。像是《超級瑪利歐兄弟》和《音速小子》等遊戲在 80 年代和 90 年代就使用了這種效果，許多現代遊戲仍然充分利用這種效果來產生深度——您可以看看《茶杯頭》或《奧日與精靈意志》的實際遊玩畫面，就能明白我們的意思。

在 2D 橫向捲軸遊戲中，這種方法以不同的速度捲動背景和前景圖層，創造出生動的動畫場景。以下是一個範例，展示了遊戲《低語世界》中的不同圖層。

將所有這些圖層組合在一起，我們就得到了這張完整的背景圖像。

為這些不同的圖層添加不同的捲動速度，就能產生強烈的景深效果和流暢的動畫。

Sketch 的視差效果

我們選擇在我們網站的幾個頁面上使用細微的視差捲動效果——您可以到我們的設計頁面看看實際效果。我們的首席網頁設計師 Augusto Lopes 解釋說：「這是很自然的一步。視差動畫可以事半功倍。它們易於實作，如果使用得當，可以為您的網站增色不少——只是不要過度使用！」

我們的設計師兼前端開發人員 Richárd Gazdik 也同意這個觀點。「這種動態感覺很自然，並為原本靜態的佈局增添了深度，」他說道。

從開發的角度來看，這也很簡單——正如 Richárd 解釋的那樣：「我們使用了一個非常小的 JS 框架，叫做 Stimulus。它允許我們創建由 HTML 資料屬性控制的小型 JavaScript 組件，」他繼續說道。只需一些額外的 HTML 資料參數，團隊就可以根據滾動速度控制水平和垂直速度。「因此，較大的物件和元素在虛擬空間中移動較慢，而較小的物件和元素則可以移動得更快，」Richárd 總結道。