視差的視覺效果給人一種深度和維度的印象。透過以不同的速度移動螢幕上的元素,可以實現這種效果。實現具有視差效果的動畫有多種用途,透過展示機製或強調產品的結構來增強用戶參與度。它還可以創造引人入勝的視覺體驗,鼓勵訪客進一步探索您的網站。 Webflow 最新的 Interactions 2.0 簡化了此類動畫在您網站上的集成,無需任何編碼。
在這裡,我們將介紹:
- 建立初始設定
- 定義動畫
- 設定滾動動畫
- 預覽動畫
- 合併額外的動畫
- 在特定裝置上停用動畫
專業提示-深度錯覺
若要創造逼真的 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 位置。該段中似乎存在三個平面或深度層:
- 第一層-影像看起來更近且移動速度更快
- 第二層——幾乎所有其他圖像似乎都以標準速度移動
- 第三層——影像看起來更遠,移動速度似乎明顯減慢
- 包含或消除工作區點和成員 - 2024 年 4 月 15 日
- 定心框總結 - 2024 年 4 月 15 日
- 儲存站點以供日後參考 - 2024 年 4 月 15 日