MODULE 3

互動特效:
讓頁面活起來

學完:加上「一眼記住」的動態,知道怎麼點菜、怎麼驗收特效真的在動。

核心觀念

特效是菜單題,不是技術題。
你需要的是叫得出名字。

先逛菜單,再點菜

web-effects-collector — 90 個開源特效、12 類,每個有現場 demo
挑特效流程:逛 → 記下名字 → 貼給 AI
「加個酷酷的效果」= 災難;「tsParticles 星座連線粒子,白點細線,hero 背景」= 精品

https://yazelin.github.io/web-effects-collector/

行銷頁最實用三類

類型	適用	點菜關鍵字
粒子背景	hero 科技感 / 夢幻感	tsParticles、星座連線、漂浮光點
動態材質	質感品牌、不想太花	Vanta FOG(霧)、WAVES(波浪)
捲動進場	內容多的長頁	IntersectionObserver 淡入

原則:一頁最多一個搶眼特效,其他用安靜的捲動進場。特效是調味料。

點菜 prompt 範本

在我這個活動頁的 hero 區塊加上 tsParticles 粒子背景:
1. 用 CDN 引入 tsParticles v3 的 @tsparticles/all bundle,
   並記得先呼叫 loadAll() 再 load 設定
2. fullScreen 要設為 false,粒子只出現在 hero 區塊內
3. 風格:細小白色光點 + 淡淡連線,緩慢漂浮,密度低,優雅不要吵
4. 粒子層要在文字後面(z-index),不能擋到標題和按鈕
5. 手機上粒子數量減半,避免發熱耗電

第 1、2 點照抄——這是 tsParticles 兩個最常見的雷,先在 prompt 裡堵住。

細節疊加:demo 01 的蒸氣

照片裡的蒸氣是靜的,品牌感要會動的
解法:CSS 蒸氣絲(三縷模糊白絲、錯拍上升)疊在照片杯口
關鍵:照片容器維持原始比例,杯口位置就是固定百分比,蒸氣不會跑位
這類「照片 + 動態疊層」是質感頁的高 CP 值手法

驗收:特效真的在動?

肉眼:hero 上看得到在動
F12 Console 不能有紅字;有就整段貼回給 AI
縮成手機寬:還在、不擋文字、捲動順暢
特效層壞掉常是「整頁正常,canvas 一片空白」——別只看有沒有 canvas

常見坑

粒子蓋住整頁、按鈕點不到 → fullScreen 沒關 / z-index 蓋到文字
載入順序 → Console 出現 xxx is not defined,貼給 AI
特效太多 → 粒子 + 波浪 + confetti = 夜市
老手機發燙 → 粒子減半、關 hover 互動

對照成品:demos/01-landing(粒子 + 蒸氣)

動手做

任務 — 給 hero 加一個 tsParticles 粒子背景,密度低、fullScreen 設 false
預期 — 粒子緩慢在動、不擋標題與按鈕,Console 無紅字
卡關 — 粒子蓋整頁/點不到按鈕,就關 fullScreen、把粒子層 z-index 放文字之後

互動特效:讓頁面活起來