滾動視差運動

視差的視覺效果給人一種深度和維度的印象。透過以不同的速度移動螢幕上的元素，可以實現這種效果。實現具有視差效果的動畫有多種用途，透過展示機製或強調產品的結構來增強用戶參與度。它還可以創造引人入勝的視覺體驗，鼓勵訪客進一步探索您的網站。 Webflow 最新的 Interactions 2.0 簡化了此類動畫在您網站上的集成，無需任何編碼。

在這裡，我們將介紹：

1. 建立初始設定
2. 定義動畫
3. 設定滾動動畫
4. 預覽動畫
5. 合併額外的動畫
6. 在特定裝置上停用動畫

專業提示－深度錯覺

若要創造逼真的 3D 環境，請遵循深度感知原則。元素大小、位置、陰影距離甚至模糊效果等因素都有助於模擬深度和場。

開始設定

步驟 1. 插入節

首先添加一個 部分 元素從 元素面板 在左側。將其放置在可見區域下方和其他部分上方。

步驟 2. 調整截面

選擇該部分並添加頂部和底部 填充 在樣式面板中。另外，設定 溢出 到 隱 將內容包含在部分邊界內。

步驟 3. 插入容器

拖曳一個 容器 元素來自於 元素面板 進入該部分。設定其 高度 到 1200px 並使其 位置 相對的。此設定允許在容器內精確定位影像。

步驟 4. 匯入影像

從以下位置選擇影像 資產面板 並將它們放入該部分。調整影像尺寸，有效營造 3D 空間感。

附加資訊

您可以在中修改圖像寬度 影像設定模態。透過雙擊圖像或點擊圖像標籤旁邊的齒輪圖示來存取它。或者，使用 元素設定面板 選擇影像並按下鍵盤上的 D 鍵，即可在右側設計側。

在影像設定中調整影像尺寸會跨各種裝置斷點進行級聯變更。對於特定設備上的獨特尺寸，請調整 寬度 透過 風格面板.

步驟 5. 增強影像樣式

申請一個 陰影 到每個圖像。確保陰影一致 角度 跨所有圖像。調整 顏色, 不透明度， 距離， 模糊，以及陰影的大小/分佈以創建視覺深度。

步驟 6. 定位影像

設定 位置 每個影像的 絕對。透過 UI 或手動輸入操縱位置值來調整影像定位。定義一個 z 索引 控制分層 - z 指數較高的影像看起來更接近並重疊背景。

動畫定義

理解動畫對於識別動畫至關重要 事件和回應 達到預期結果所需要的。 

在此動畫中，當該部分捲動到視圖中時，圖像會呈現動畫效果。就這樣 事件 是一個 元素觸發 的 在視圖中滾動時，觸發 滾動動畫 作為 回覆.

步驟 7. 定義事件

透過選擇包含圖像的部分開始建立互動。利用 互動面板 設定一個 元素觸發 的 在視圖中滾動時.

步驟 8. 事件配置

選擇到 啟動滾動動畫。如果需要控制動畫開始和結束的時間，請調整動畫邊界。預設情況下，動畫在該部分進入視口時開始，並在其退出時結束。對於本教程，請堅持使用預設設定。

描述滾動動畫

明確你的目標可以幫助確定需要製定的任務。此時，目標是改變影像的速度。在滾動片段時，位於最前面的那些看起來應該比背景中的那些以更高的速度運動。因此，您將設計一個 滾動動作 和 轉移 對於每個圖像。隨後，確定 地點 上每個影像的 y 軸 在動畫的開始和結束時。

步驟 9. 建立滾動動畫

在開始動畫之前，我們先討論一下平滑的概念。平滑或阻尼可以緩和並細化即將到來的速度，使其達到動畫時間軸上的準確位置。平滑值可以在 滾動動畫。對於本指南，您可以將其保留在 50% 中。

現在，產生一個新的 滾動動作

步驟 10. 執行換檔操作

選擇 z 索引最大且最接近您的視角的影像。介紹一個 滾動動作 的 轉移 修改影像在動畫期間的移動方式。

動畫時間軸中包含兩個關鍵影格或影像的出現。一個配置在 0%（動畫的開始），另一個配置在 100%（動畫的結束）。

步驟 11. 建立初始位置

選擇 0% 處的第一個關鍵影格。在裡面 平移變換設定，透過指定影像的位置來降低影像的位置 Y軸 如 1000 像素。這將表示該片段最初捲動到視圖中時影像的位置。

步驟 12. 決定最終位置

標記動畫時間軸中的第二個關鍵幀，並透過精確定位影像在動畫時間軸上的位置來提升影像 y 軸 至 -1000 像素。這將表示當片段滾動到視圖之外時圖像的位置。

步驟 13. 建立次要操作

選擇 z 索引最低且位於段內最靠後的影像。整合一個滾動動作 轉移。兩個新的關鍵影格被附加到該新影像的動畫時間軸中，一個位於 0%，另一個位於 100%。

確定主要位置

為此新影像選擇 0% 處的關鍵影格。在裡面 平移變換設定，透過指定圖像在 Y軸 為-352px。當片段捲動到視圖中時，該影像將從該位置開始移動。

指定最終位置

選擇對應影像的100%處的關鍵幀，並調整其在 Y軸 至 352 像素。當您向下瀏覽頁面時，該圖像將下降到該位置。如果您修改了先前操作的緩動首選項，請確保套用相同的 緩和 對所有行動。

第 14 步：建立第三個動畫

在前景中選擇不同的影像。包括滾動動作 轉移。對於第一個關鍵幀，將其降低。指定值 300px。對於第二個關鍵幀，提升影像。現在設定一個值，例如-500px。這將導致影像遍歷 800 像素的跨度，該跨度比最近的影像慢，但比最遠的影像快。

動畫的初步看法

預見動畫 預覽模式 設計師的或透過切換在畫布上生活 即時預覽 在。目前，視差效果更加明顯，並且您已經在該動畫中開發了似乎額外的深度等級。修改頭寸或寬鬆以達到預期結果。

合併額外的動畫

在整個滾動動畫序列中，繼續將滾動動作附加到您希望設定動畫的每個圖像。確保遵循這種系統模式來製定連貫的視差滾動動畫：前景中的元素（z-index 較高的元素）似乎比背景中的元素（z-index 較低的元素）移動得更快。

禁用小工具的動畫

您可以選擇在行動裝置上停用此動畫。透過選擇關閉動畫時間軸 X 在“視差滾動效果”旁。然後內 其他設定, 停用裝置 您不希望觸發此互動的地方。

功能性英特爾—運動速度

在決定影像在 y 軸上的位置時，您同時確定了運動速度。這是因為當瀏覽該段時，初始影像從 1000 像素的 y 位置移動到 -1000 像素的 y 位置（距離為 2000 像素）。隨後的影像覆蓋了 704 像素的較短距離，因為它從 -352 像素的 y 位置過渡到 352 像素的 y 位置。該段中似乎存在三個平面或深度層：

• 第一層－影像看起來更近且移動速度更快
• 第二層——幾乎所有其他圖像似乎都以標準速度移動
• 第三層——影像看起來更遠，移動速度似乎明顯減慢