昨天完成了文章內容的圖文切版、元件插入與雙版本視角切換，今天則是要讓這些版塊 「動」起來！
讓使用者在瀏覽過程中感受到節奏、層次，提升整體體驗感。這也是我在設計文章排版時，非常在意的一環！
| 任務 | 說明 |
|---|---|
| 🎞️ 元件微動畫調整 | 實作小白／專家區塊切換時的視覺過渡（滑入、淡入） |
| 📱 手機閱讀體驗優化 | 檢查 tab / toggle 在手機排版時的可用性與順暢度 |
| 🎨 插圖顯示節奏優化 | 圖片滾動 reveal、懸浮小動畫設計 |
| 🧭 文章導覽優化 | Anchor 目錄區塊實作與滑動定位動畫 |
這次我使用的組合主要是：
| 小技巧 | 說明 |
|---|---|
| ❄️ 插圖 reveal | 用 Elementor 的 motion effect 進場效果，控制滾動時機 |
| 🌀 小白／專家切換動畫 | 使用 fade / slide-in 效果減少突兀感 |
| 🧭 Anchor 導覽 | 使用 Elementor 的目錄小工具，並手動調整 section id 對應滑動位置 |
比起靜態網頁，現在的排版更有節奏感。讀者在滑動的過程中會被「引導」進入下一段，而不是硬生生被資訊轟炸。
尤其是：
明天（Day17）要進行 SEO 設定、GA追蹤碼插入、OG圖設定、標題描述撰寫，幫這篇文章正式準備好對外曝光 🔍✨
iThome鐵人賽
看影片追技術