｜前言｜
好的文字動畫不僅能抓住參加者的目光，更能引導完成轉換動作。本篇將介紹如何使用發燒內建動畫，以及如何透過 USAL 擴充更多獨特的視覺特效。
為什麼網頁需要文字動畫？
深度留客：互動式內容能引導用戶停留更久，網頁駐留時間平均提升 70%，讓你的品牌訊息有更多機會被讀完。
精準導購：使用互動動畫的網頁，其轉化次數是傳統網頁的 2 倍；針對按鈕（CTA）加入動態效果，點擊率有15% 至 40%的成長空間！
強力吸精：文字動畫能消除網頁的「死板感」，平均提升用戶 50% 的參與意願，讓訪客更願意與內容產生互動。
資料來源：Demand Metric 、Social Targeter、 CleverQuokka
發燒互動內建文字動畫設定
發燒後台已預設多款常用動畫，您無需撰寫程式碼即可快速套用。
設定動畫的地方在哪裡？
進入網頁編輯器後，選取您要設立動畫的文字，點選工具列的「更多」，接著點選「動畫設定」，即可設定。
發燒內建動畫對照表
後台選單名稱 | 程式碼標籤 |
浮現 | data-usal="fade" |
從右浮現 | data-usal="fade-l" |
從左浮現 | data-usal="fade-r" |
垂直翻轉 | data-usal="flip" |
水平翻轉 | data-usal="flip-l" |
旋轉 | data-usal="flip-ul" |
放大 | data-usal="zoomin" |
縮小 | data-usal="zoomout" |
進階設定
如果內建動畫無法滿足你的需求，發燒支援匯入USAL產生的動畫程式碼。
USAL 是一個強大的第三方動畫生成工具，它能讓您：
自定義更複雜的動畫軌跡與曲線。
精確控制動畫的「彈力」與「速度感」。
生成輕量化的代碼，不影響網頁載入速度。
如何從 USAL 網站生成動畫並匯入發燒網站？
【Step 1】前往 USAL 官網設定效果
進入 USAL 網站後，選擇「Playground」，接著從左側選單挑選動畫類型（Animation Type)。
a. Fade (淡入類)： 元件從透明變不透明。例如：fade-u (向上淡入)、fade-dl (向左下淡入)。
b. Zoom In (放大類)： 元件從小變大出現。
例如：zoomin-r (向右放大出現)。
C. Zoom Out (縮放類)： 元件從大變小出現（通常有遠近感）。
例如：zoomout-ul (向左上縮放出現)。
Ｄ. Flip (翻轉類)： 像翻牌一樣的動作。例如：flip-l (向左翻轉)。
＊方向代碼小筆記： u=上, d=下, l=左, r=右。
調整其他動畫細節
不要嚇到！不用每一個都調整，挑你喜歡的調整就好囉！！
Animation Tuning（動畫調校）：
Value 1 (movement/angle): 數值 1（移動距離或旋轉角度）。
Value 2 (Y/perspective): 數值 2（垂直位移或透視感）。
Value 3 (intensity): 數值 3（動畫強度）。SPLIT OPTIONS (拆分選項)： 用於文字動畫，例如將句子拆成單字。
Split Delay (ms): 每個拆分元件之間的延遲時間（毫秒）。TEXT EFFECTS (文字效果)： 專門針對文字的特殊特效。
COUNT ANIMATION (數字計數動畫)
Target Number: 目標數字（例如捲動到這裡時，數字會從 0 自動跑動到 1000
TIMING (時間相關)
Duration (ms): 動畫持續時間。數值越高動畫越慢（圖中 1000 代表 1 秒）。
Delay (ms): 延遲時間。捲動到該位置後，要過多久才開始動。
Threshold (%): 觸發門檻。元件進入視窗多少比例時觸發動畫（圖中 10 代表進入 10% 就開始動）。EASING (平滑效果/緩動)
控制動畫的速度變化曲線（例如：先快後慢、等速或是彈跳）。
TYPOGRAPHY (文字排版)
Default Font: 字體選擇。
Font Weight: 字體粗細（如 Bold, Light）。
Font Size (px): 字體大小（像素）。
MODIFIERS (修正器/額外效果)
Blur: 模糊效果。可以設定進入時是否帶有模糊感。
Once only: 僅執行一次。勾選後，動畫只會在第一次捲動到時觸發，往回捲再下來就不會再動。
Loop continuously: 持續循環。
Keep final state: 保持最終狀態。動畫結束後停在最後一格，不會消失或重置。
如果你不想一個個調整參數，USAL 提供了一鍵套用的預設模板。
點擊這些按鈕可以立刻看到經典的排版動畫：（懶人福音！）
Hero Title: 主標題效果（通常大氣且緩慢）。
Card List: 卡片列表（適合產品介紹區）。
Counter: 數字計數器。
Shimmer Text: 微光閃爍文字。
Fluid Text: 流體/流暢文字效果。
Split Paragraph: 段落拆分（讓整段文字有層次地出現）。
Custom Timeline: 自定義時間軸。
Tuned Animation: 經過調校的精細動畫。
Loop Animation: 循環動畫。
Stagger Effect: 交錯效果。
【Step 2】將在 USAL 產生的 HTML程式碼，在預覽沒問題後，複製到發燒程式碼欄位就可以囉！
USAL 動畫實作小撇步
技巧1 ：如何更改預覽內容？（不再只是 Hello USAL）
進入USAL Playground 後，找到 HTML 編輯區，找到 <div ...>Hello USAL!</div>。將 Hello USAL! 刪除，改寫成你想測試的文字（例如：立即購買、點我領取）。修改後，下方的預覽畫面就會立刻換成你的文字，方便你確認動畫節奏是否合適。
技巧2：如何把喜歡的效果複製到發燒網站？
如果你已經都編輯好內容，希望可以針對某些文字設定動畫，
例如：我想針對我某個塊按鈕上的文字「立即購買」，設定 Loop Animation 循環動畫
你可以先在USAL 建立好 Loop Animation HTML 程式碼
接著只需要複製 data-usal="fade loop duration-1000"這段（data-usal後方將會依照您選的動畫有所不同）
複製完，回到發燒互動網頁編輯器，點開你想套用動畫區塊的原始碼，把這段貼在屬性 style 後面，就可以囉！
