F20▸B004▸framer-motion
Marquee
跑馬燈
難度 ★★★★★標籤 循環 · 文字 · 橫向3 min read
效果簡述
橫向無限循環的文字 / Logo 列。客戶 logo wall、技術棧展示、活動公告 都很常用。重點是「複製內容兩份做無縫銜接」，這個技巧 90% 的教學 都沒講。
Framer Motion·GSAP·Three.js·Tailwind·Next.js·Lenis·Shiki·Framer Motion·GSAP·Three.js·Tailwind·Next.js·Lenis·Shiki·
Claude Code Prompt
參考：B004 marquee
技術：Framer Motion + 內容複製兩份做無縫銜接
具體行為:
- const doubled = [...items, ...items]
- 父層 overflow-hidden
- motion.div animate={{ x: ['0%', '-50%'] }}
- transition: { duration: 18, ease: 'linear', repeat: Infinity }
- 內層 width 用 w-max（讓內容決定寬度）
限制：
- 速度 duration 15-25 秒最自然（依內容長度調）
- 不要做縱向 marquee（使用者期待頁面是縱向滾的）
- 滑鼠 hover 暫停可以加（pauseOnHover）但別必要完整程式碼
'use client'
import { motion } from 'framer-motion'
const items = ['Framer Motion', 'GSAP', 'Three.js', 'Tailwind', 'Next.js']
export function Marquee() {
const doubled = [...items, ...items]
return (
<div className="overflow-hidden">
<motion.div
animate={{ x: ['0%', '-50%'] }}
transition={{ duration: 18, ease: 'linear', repeat: Infinity }}
className="flex w-max gap-8"
>
{doubled.map((item, i) => (
<span key={i}>{item}</span>
))}
</motion.div>
</div>
)
}何時用
- ✅ 客戶 Logo wall
- ✅ 技術棧 / 工具列展示
- ✅ 活動 ticker / 公告條
何時別用
- ❌ 重要資訊（會錯過、難閱讀）
- ❌ 太短的內容（5 個以下不夠形成循環感）
- ❌ 內文區（會分心）
我踩過的坑
-
沒複製兩份會看到「缺口」：只有一份內容時，animate 從 0% 到 -100% 結束會看到空白才循環。複製兩份 → x: 0% 到 -50% 剛好對齊。
-
gap 在內容之間 vs 結尾：用 flex gap-8，結尾沒 gap，循環時 兩份內容會「黏」在一起。解法：每個項目自己加 padding-right， 或在最後一個項目加 spacer。
-
w-max 不能省：父層 overflow-hidden 會讓 motion.div 被夾住 寬度，內容會擠成一團。內層必須 w-max 或 inline-flex 才能撐開。
相關效果
- F19 Animated Gradient — 另一種無限循環視覺