header-logo
了解如何以 Wix 建立網站和商家。
了解如何建立、管理並維護 Wix 網站。
管理訂閱、方案與請款單。
處理業務,與會員連繫。
學習如何購買、連結或轉移網站網域。
以進階功能提升效率。
尋求解決方法,了解已知問題,或聯絡我們。
placeholder-preview-image
以課程和教學加強技能。
學習網頁設計、行銷等範疇的秘訣。
學習如何提升來自搜尋引擎的自然網站流量。
以全端平台建立自訂網站。
與專家配對,幫助實現目標。
placeholder-preview-image

Wix Studio 編輯器:關於動畫

2 分鐘
在設計中加入動畫可提升作品層次。Studio 編輯器提供 5 種不同的動畫類型,視您希望動畫顯現的時機而定。
當訪客浮動於元件上方、點擊或捲動經過元件時,即可讓動畫顯現。您也可以新增元件首次載入時的進入動畫,或是持續循環的動畫 ── 完全不需要編寫任何程式碼。
請留意:
動畫大小是根據頁面首次載入時的特定瀏覽器進行 Calc。若透過拖曳把手調整瀏覽器視窗大小,動畫可能無法正常顯現。建議重新整理頁面以獲得最佳顯示效果。

進入動畫

為元件新增 進入動畫是吸引訪客注意力的絕佳方式。當元件首次進入檢視範圍時,動畫便會顯現,立即吸引目光。有多種類型可供選擇,並可根據客戶的確切需求進行自訂。
將進入動畫套用至整個頁面的範例,在載入時揭示頁面

浮動與點擊式互動

新增訪客浮動於元件上方或點擊元件時顯現的酷炫效果。您可以讓元件在浮動/點擊時變形、移動或揭示新內容。
從一系列 預先設計的效果中選擇,或根據確切規格建立 自訂效果。管理時間、順序和平滑度以整合整體效果,接著即可直接從編輯器預覽最終結果。
您可建立元件之間的互動,浮動於或點擊某個元件時即可讓另一個元件產生動畫。
在下方範例中,將滑鼠浮動於段落上方即可觸發按鈕和圖片移動。
顯示已上線網站互動效果的 GIF。

捲動動畫

透過 捲動驅動動畫 增加互動並建立有趣的效果。動畫進度與捲動位置直接相關,隨著訪客上下捲動而前進或後退。
您可建立元件之間的互動,捲動過去某個元件時即可讓另一個元件產生動畫。
在下方範例中,捲動並經過標題後即可讓重複列表成長。
已上線網站上的捲動動畫範例

循環動畫

透過持續循環的動畫在設計中建立動態感。您可以為任何希望訪客提前通知的元件新增循環動畫 ── 有些較為細微,有些則非常吸睛。
已上線網站上帶有循環動畫的文字遮罩元件範例

媒體背景的 WebGL 效果

透過 WebGL 效果轉化客戶專案,將媒體背景打造為吸睛亮點。這些效果在吸引網站訪客的同時,也能確保最佳表現。您可從多種令人印象深刻的預設格式中選擇、調整屬性,並決定啟動方式:隨捲動自動觸發,或透過訪客的滑鼠移動觸發。
顯示多個區段背景中帶有 WebGL 動畫之已上線網站的 GIF。

常見問題 (FAQ)

選擇問題以瞭解更多動畫效果資訊。