header-logo
開始使用 Wix以 Wix 建立網站和商家。歡迎使用我們的 AI 工具來建立網站、自訂範本或雇用專業人員,樹立網上形象。
建立網站了解如何以 Wix 工具建立並管理網站。您也可在此找到更多關於 AI 工具、網站訪客隱私權和無障礙的資訊。
帳戶與帳單檢閱帳戶設定,設定訂閱與方案,查看請款單。
使用 Wix 行動應用程式歡迎使用 Wix 行動應用程式,隨時隨地處理業務,並以專屬應用程式吸引網站會員互動。
連結網域以逐步指南了解如何購買、連結或轉移網站網域,並學習如何確保網站資料安全。
Studio、夥伴與 Enterprise善用 Studio 或 Enterprise 帳戶,以進階功能提升效率。
需要協助?尋找網站與技術支援,了解已知問題,或聯絡我們要求協助。
placeholder-preview-image
Wix Learn以課程和教學加強技能。
Wix 部落格學習網頁設計、行銷等範疇的秘訣。
SEO 學習中心學習如何提升來自搜尋引擎的自然網站流量。
網站開發以全端平台建立自訂網站。
聘用專業人士與專家配對,幫助實現目標。
placeholder-preview-image

Wix 編輯器:新增及自訂動畫

使用動畫為網站注入活力。從進入、捲動、循環到游標效果,我們為各種設計需求提供多樣化的動畫。
您可自訂動畫,呈現心中所想的效果。例如,調整距離、持續時間、延遲等設定。行動版動畫專為較小的畫面而設計,讓網站在任何裝置上都能吸引訪客目光。
您可將不同的動畫和效果套用至同一個元件。
這張 GIF 動圖顯示捲動網站時的各種圖片動畫。
動畫發生問題?
按照步驟操作,讓動畫在已上線的網站中正常運作。

為元件新增動畫

為元件新增動畫,讓網站更生動、更具吸引力。每種動畫都有不同效果,可為不同元件搭配各種動畫,讓訪客留下深刻印象。
提示:
選擇元件群組,再點擊動畫圖示 ,即可為群組新增動畫。

若要新增動畫:

  1. 點擊編輯器中的相關元件。
  2. 點擊動畫圖示
  3. 從可用選項中選擇動畫。
    • 進入:已選擇的元件出現在畫面上時,動畫只會播放一次。
    • 一直重複:動畫會持續循環播放。
    • 捲動:元件捲動至檢視範圍內時,動畫便會播放。
    • 動態與效果:訪客將游標停留在元件上時,動畫便會開始播放。
這張 GIF 動圖演示多種可循環播放的動畫。
注意:
頁首中的元件只會在首次造訪頁面時播放一次動畫。

自訂動畫

為元件新增動畫後,您可自訂動畫的運作方式,使其符合網站風格。
調整強度、方向和延遲等設定,提升視覺效果並吸引訪客。
注意:
可用的自訂選項取決於所選動畫。

自訂動畫:

  1. 點擊編輯器中的相關元件。
  2. 點擊「動畫」圖示
  3. 點擊「自訂」,再使用下列選項調整動畫:
    • 強度:點擊下拉式選單,選擇動畫播放時的強度。
    • 方向:選擇動畫進入的方向(例如順時針、從右側進入)。
    • 距離:使用滑桿變更效果起點與終點之間的距離。
    • 持續時間:使用滑桿調整動畫的播放時間。
    • 延遲:使用滑桿增加或縮短頁面載入與動畫開始之間的延遲時間。
    • 速度:拖曳滑桿即可變更效果速度──數字越小,效果越快。
    • 運動軸:決定元件要橫向、垂直或沿兩個軸移動。
    • 動畫類型:選擇捲動時採用進入、消失或連續動畫。
    • 基準點:選擇元件開始移動的參考點。
    • 動態:選擇動態強度,例如柔和或適中。
翻轉動畫設定的螢幕截圖,顯示動畫方向和持續時間等不同設定。
無障礙提示:
若此元件僅供裝飾,也就是不包含螢幕助讀程式所需的重要資訊,請選擇「裝飾性」核取方塊。此選項位於設定 面板中。

在行動版網站新增動畫

除了在桌面版網站的元件中新增動畫,也可在行動版網站中新增動畫,讓訪客使用任何裝置時都能享有良好的瀏覽體驗。
行動版動畫專為較小的畫面解析度和尺寸設計,因此不必擔心間距問題。
注意:
在桌面版網站新增的動畫效果不會套用至行動版網站,因為兩者已針對不同畫面尺寸進行最佳化。若也想讓元件在行動版網站中顯示動畫,請按照以下步驟操作。

在行動版網站新增動畫:

  1. 前往行動版編輯器
  2. 點擊相關元件。
  3. 點擊「動畫」圖示
  4. 從可用選項中選擇動畫。
在行動版編輯器中選擇元件動畫
Velo 重要注意事項:
若使用 Velo(程式碼)隱藏或顯示元件,也需透過 Velo 設定動畫。