Studio 編輯器：新增捲動動畫
3 分鐘
新增捲動動畫可讓瀏覽體驗更具吸引力且令人難忘。動畫的進度與捲動位置直接連結，在訪客上下捲動時揭示或轉換元件。
提示：
前往 Wix Studio 學院課程，瞭解更多關於新增動畫與互動的資訊。
新增捲動動畫
若要新增捲動動畫，請選擇觸發動畫的元件。當訪客捲動經過此元件時，您選擇的動畫即會開始。接著，決定要讓哪個元件產生動畫，並選擇動畫類型（顯現或消失）。
若要新增捲動動畫：
- 選擇相關元件。
- 點擊編輯器右上方「開啟檢驗器」圖示
。
- 點擊 動畫和效果 索引標籤
。 - 點擊 捲動 下方的 + 新增。
- 設定動畫：
- 在 動畫元件 下方選擇要顯示動畫的元件。
- 在 動畫類型 下方選擇一個選項，決定元件是要動畫顯現至原始位置，還是從原始位置動畫消失：
- 顯現： 動畫的結束點是畫布上的目前設計（例如：向下捲動時元件淡入）。
- 消失： 動畫的起始點是畫布上的目前設計（例如：向下捲動時元件淡出）。
- 從清單中選擇動畫。
提示： 將滑鼠游標懸停在動畫上即可預覽效果。
便箋：
- 無法將 釘選 的元件設定為觸發條件，因為它始終保持在相同位置（相對於訪客的視窗）。
- 請確保頁面上有足夠的空間讓捲動動畫正常顯現。例如，若元件位於頁面的第一屏或最後一屏，可能無法看到捲動動畫。
正在尋找橫向捲動嗎？
雖然檢驗器中的選項適用於垂直捲動，但您可追蹤 Wix Academy 教學課程來建立引人注目的橫向捲動效果。
自訂捲動動畫
選擇動畫後，請根據需求進行設定。可用的設定取決於您選擇的特定動畫。
若要自訂捲動動畫：
- 選擇相關元件。
- 點擊編輯器右上方「開啟檢驗器」圖示 。
- 點擊 動畫和效果 索引標籤 。
- 點擊想要變更的捲動動畫。
- 點擊 調整動畫 以變更其設定：
- 方向：選擇動畫應從哪個方向開始（例如：從左側、從上方）。
- 比例：設定此動畫中元件的目標大小。例如，80％ 表示元件在動畫中會收縮 20％。
- 距離：決定元件在此動畫中移動的距離。
- 動畫區域：決定捲動到哪個點時動畫開始和停止。0％ 是畫面底部，100％ 是頂部。例如，若將區域設定為 0％ - 50％，則動畫會在元件位於畫面底部時開始，並在觸及中間時停止。
提示：
啟用捲動以預覽切換開關，即可直接在畫布上查看正在建立的動畫。
移除捲動動畫
您可隨時從檢驗器面板移除捲動動畫。
若要移除捲動動畫：
- 選擇相關元件或區段。
- 點擊編輯器右上方「開啟檢驗器」圖示 。
- 點擊動畫與效果索引標籤。
- 將滑鼠游標懸停在動畫上，然後點擊更多操作圖示
。 - 點擊移除。
捲動動畫疑難排解
捲動效果顯現得太晚
若捲動動畫開始得太晚或運作不如預期，您可調整 動畫類型（顯現或消失）和 動畫區域 設定來修正問題。
觀看影片教學以找出導致延遲的原因以及修正方法。
（僅限行動裝置）捲動效果未在橫向模式中顯現
在行動裝置上檢視客戶網站時，若訪客在瀏覽過程中旋轉畫面，捲動動畫可能會停止運作。換句話說，若在捲動頁面時將手機翻轉為橫向（橫向模式），捲動動畫將不會顯現。
若要解決此問題，訪客可在橫向模式下重新整理頁面，這將會「重新啟動」動畫。