捲動某些網站時，標題像被風吹進畫面，按鈕滑鼠一靠近就悄悄放大，背景圖跟著捲動慢半拍往上飄——這種畫面「自己動起來」的錯覺，其實不是設計師逐格手繪出來的，是幾組被設定過的介面反應。
這幾組反應在 Elementor 裡有個統一的名字，叫 Motion Effects（動作特效），就藏在每個元素「進階」分頁底下同一個面板裡。設定 Elementor 動畫效果不需要寫一行 CSS，拖曳式編輯器就能做出進場滑入、滑鼠懸停放大、捲動視差這幾種常見效果，只是面板裡有些選項免費版就打得開，有些要升級 Pro 才會亮起來。
先搞懂這個面板分成哪三塊，再一塊一塊拆，才不會裝了外掛卻找不到想要的效果藏在哪裡。
Elementor 動畫效果，可以從哪三個方向下手？
這個面板不是單一功能，是三塊各自獨立的效果，只共用同一個操作入口：在 Elementor 編輯器裡選取任何一個元素、容器或區塊，點進「進階」分頁，展開 Motion Effects，三種效果的開關都排在同一份選單裡。
- 進場動畫（Entrance Animation）：元素捲動進畫面時播放一次，例如標題淡入、卡片滑入，整組都是免費版就有的功能。
- 懸停效果（Hover）：滑鼠移到元素上才觸發，多數選項也免費，只有持續跟著游標移動的那幾招要 Pro。
- 捲動視差與動作特效（Scrolling Effects 與 Mouse Effects）：畫面隨捲動或滑鼠位置持續變化，Elementor 官方明講這塊是 Pro 專屬，免費版點進去只會看到升級提示。
免費版可以先把進場動畫與大半懸停效果練熟，等你真的需要捲動視差這種持續互動的層次，再評估要不要升級。接下來先從最基本、也最常見的進場動畫講起。
進場動畫怎麼設定，元素才會捲動時滑進畫面？
常見的進場動畫效果，比較適合用在哪裡？
Elementor 官方列出的進場動畫一共有 37 種，分成幾個類別，不必每種都記，先認得幾個代表款就能應付大多數情境。
- 淡入類（Fade In、Fade In Up）：畫面最不搶戲的一種，適合標題、段落這種常態內容，讓文字自然浮現就好。
- 滑動類（Slide In Up、Slide In Left）：帶方向感，適合卡片、圖片這種需要「從哪裡來」的元素。
- 縮放類（Zoom In）：比淡入更有存在感，適合想強調的圖示或按鈕。
- 注意力吸引類（Bounce、Pulse、Tada）：效果最搶眼，也最容易用過頭，建議只留給真正想吸引點擊的單一元素，不要整頁的標題、段落都套上同一種彈跳。
設定進場動畫的操作位置，與依序進場的小技巧
操作路徑很固定，先選取要設定的元素，點進「進階」分頁，展開 Motion Effects，在 Entrance Animation 下拉選單挑一個效果即可。你也可以逐裝置分別設定，手機版直接選 None 關掉，避免小螢幕捲動時動畫太密集、反而讓人眼花。
同一個畫面有好幾個元素要進場時，別讓它們同時跳出來，改用 Delay（延遲毫秒數）把時間錯開。比如標題設 300 毫秒、副標設 600 毫秒、按鈕設 900 毫秒，畫面就會呈現一個接一個滑入的節奏感，比全部同時出現更有層次。
滑鼠懸停效果免費就有，滑鼠追蹤特效才要升級 Pro
免費版就有的三種懸停效果
如果你想讓滑鼠移到元素上出現變化，免費版其實已經給了三種工具，不用等升級也能做出互動回饋。
- Hover Animation 預設動畫：在樣式分頁挑一個現成效果，放大、縮小、跳動、旋轉都有，設定最快，適合趕時間又想要點互動感的情境。
- Transform 自訂懸停變形：在進階分頁把旋轉、縮放、傾斜、翻轉切到「懸停」狀態單獨設定角度或倍率，比預設動畫更能做出自己的風格，例如卡片懸停時稍微放大並輕輕傾斜。
- 背景、邊框、陰影的懸停狀態：按鈕滑鼠移上去變色、加一圈陰影，這種最基本也最常見的互動回饋，一樣是免費版本來就有的功能。
三種工具都是切換「一般」與「懸停」兩個狀態去分別設定樣式，組合著用就能做出不少變化，完全不需要碰到付費牆。
滑鼠追蹤與 3D 傾斜，為什麼要 Pro 才能做？
前面三種懸停效果都是滑鼠碰到才觸發一次的靜態切換，滑鼠追蹤（Mouse Track）與 3D 傾斜（3D Tilt）不一樣，它們是持續跟著游標的即時位置變化，滑鼠往哪裡移動，元素就跟著同向或反向偏移、傾斜多少。這種持續追蹤的能力被歸進 Motion Effects 面板底下的 Mouse Effects，跟後面要講的捲動視差同屬 Pro 專屬功能。
設定項目不複雜，方向可以選同向或反向，速度用 0 到 10 的等級調整，也能選要在哪些裝置上生效。這類效果常用在圖片或標題上，讓它跟著游標微幅移動，營造出立體層次感，不過因為手機沒有滑鼠游標可以追蹤，這組效果基本上只在桌機瀏覽時看得到。
捲動視差與動作特效，Motion Effects 解鎖了什麼？
六種捲動特效，各自能做出什麼畫面？
升級到 Pro 之後，你會在同一個 Motion Effects 面板底下多看到 Scrolling Effects，這裡收了六種效果，都跟著捲動的動作即時變化：
- 垂直捲動（Vertical Scroll）：最經典的視差效果，元素移動的速度跟頁面本身不同步，常用來做出背景比前景慢一拍的立體感。
- 水平捲動（Horizontal Scroll）：使用者上下捲動頁面時，元素改成左右移動，適合做一些跳脫常規的視覺焦點。
- 透明度（Transparency）：元素隨捲動逐漸淡入或淡出，常用在標題隨畫面捲動慢慢消失的段落轉場。
- 模糊（Blur）：效果邏輯跟透明度類似，只是變化的是清晰度，常用在背景圖片上做出對焦感。
- 旋轉（Rotate）：元素隨捲動角度慢慢轉動，常用在裝飾圖形或圖示上，讓版面多一點細節變化。
- 縮放（Scale）：元素隨捲動放大或縮小，常見的用法是背景圖跟著捲動慢慢放大，營造呼吸感。
操作路徑跟前面一樣在「進階」分頁的 Motion Effects 裡，只是這次要展開 Scrolling Effects，每個效果都能個別調整方向、速度，還有 Viewport（決定捲到畫面高度的百分之多少才開始動），也能依裝置分別開關。Elementor 官方文件明確把 Scrolling Effects 標成 Pro 專屬，免費版帳號打開這個選項只會看到升級提示。
滑鼠效果與固定定位，也收在同一個面板
前面提過的滑鼠追蹤與 3D 傾斜，其實也可以疊加在有捲動視差的區塊上，讓同一塊畫面同時對捲動和游標都有反應，立體感會更明顯。同一個面板底下還有一個 Sticky（固定定位），可以讓元素捲動時固定黏在頁面頂部或底部，最常見的用法是把導覽列做成隨頁面捲動也一直看得到，這個功能同樣屬於 Pro，但它解決的是「定位」問題而不是「動畫」，這篇先點到，不深入拆解。
動畫是點綴，不是主角
回到開頭那個謎題，讓網站畫面活過來的，往往不是滿版特效，而是幾個抓對地方的小動作。挑出你真正想強調的重點，例如主視覺標題、關鍵按鈕，替它們加上動畫就夠了，其餘保持安靜，讀者的視線才會聚焦在你真正想讓他看到的東西上；每個區塊都動、每個按鈕都彈跳，反而會讓畫面顯得吵，甚至讓部分使用者感到頭暈不適。
Elementor 本身也把這個分寸感做進系統設計裡：使用者如果在自己的裝置（Mac、iOS、Windows 都有這個選項）開啟「降低動態效果」的偏好設定，Elementor 的動畫效果會自動停用，不會硬要跑給對方看。這代表克制動畫用量，除了畫面好看之外，也是在照顧不同使用者的瀏覽體驗。
捲動特效疊得越多，瀏覽器要即時計算的位置就越多，一旦整個網站用了 Elementor 之後跑起來變慢，那通常已經不是動畫單一功能的問題，而是要另外抓時間排查與優化的速度課題。
動畫效果好不好，從來不是看你會不會設定，是看你知不知道什麼時候該按下開關。從免費的進場動畫與懸停效果開始練手感，抓準一兩個真正重要的區塊做出畫面活過來的那個瞬間就夠了，不必也不建議每個元素都跟著動。