F01▸A001▸framer-motion
Fade Up
淡入上移
難度 ★★★★★標籤 進場 · 基礎 · whileInView3 min read
效果簡述
最基本的進場：元素從下方 24 像素淡入到原位。每個站幾乎都有它的影子， 是「不知道要做什麼動畫就先放這個」的安全選擇。
幫人做好用的網站
fade up · y: 24 → 0 · 600ms
Claude Code Prompt
undefined
完整程式碼
何時用
- ✅ Hero 區塊的副標題、按鈕進場
- ✅ 章節分隔處的第一個元素
- ✅ 滾到 footer / CTA 區的最後一句話
何時別用
- ❌ Header / Navigation（會晚於頁面內容出現，看起來像 bug）
- ❌ 同一頁所有區塊都用（重複會膩，動畫該分主次）
- ❌ DNA #002 純粹極簡（連這個都是過動）
我踩過的坑
-
viewport once 不加會煩死人：預設每次進入視口都重播，使用者 在長頁來回滾動時，同一段內容會一直閃。解法：
viewport={{ once: true }}。 -
y 值太大會掉漆：早期試過 y: 60，畫面看起來像「文字砸下來」， 不是進場是入侵。30 以下比較自然，24 是甜蜜點。
-
duration 0.3 太快、1.0 太慢：太快人眼來不及，太慢覺得卡頓。 0.5-0.7 之間最舒服。
相關效果
- F02 Fade Scale — 加上微縮放的進階版本
- F03 Line Stagger Reveal — 多行文字依序進場