動畫網站是什麼？捲動動畫、影片背景適合哪些品牌

動畫網站是頁面會隨著捲動、停留或點擊產生動態效果的網站，常見做法有三類：捲動動畫、影片背景、轉場與微互動。它適合靠視覺與氛圍成交的品牌，例如餐廳、建案、精品與珠寶；客人只想快速查資訊的店家不需要。做得好的前提是手機首屏在 2.5 秒內顯示主要內容、動效不干擾操作，並尊重訪客「減少動態效果」的系統設定。這篇文章拆開三類做法、適合與不適合的品牌、三個代價，以及上線前的八項檢查。

動畫網站是什麼

動畫網站是頁面內容會隨著訪客的動作產生變化的網站：往下捲動時圖片放大或文字浮現、進站時播放一段無聲影片、切換區塊時有過場效果。它跟一般靜態網站的差別在「畫面會回應你」，資訊本身可以完全一樣。

常見的動畫做法分成三類：捲動動畫、影片背景、轉場與微互動。三類可以單獨用，也可以混合，下面逐一說明每一類在做什麼、適合放在哪裡。

捲動動畫：頁面跟著手指往下而變化

捲動動畫是用捲動的距離控制畫面進度，訪客往下滑多少，動畫就走多少。W3C 的捲動動畫規範定義了這個機制：動畫進度等於目前捲動位置除以可捲動的總長度，所以訪客停下來，畫面就停在那一格，往回滑就倒帶。

以前做這類效果要靠大量 JavaScript 程式庫，現在瀏覽器已經內建。WebKit 官方部落格說明，用幾行 CSS 就能做出捲動驅動的動畫，不需要第三方程式庫，Safari 26 beta 已經支援。對店家的意義是：同樣的效果，現在的檔案更輕、在手機上更順。

捲動動畫最適合「有順序的故事」：建案從外觀、大廳、到室內一層層往下看；牛排館從食材、炭火、到上桌。每往下一段就揭露一個重點，訪客不用點任何東西。

影片背景：進站第一眼就有氛圍

影片背景是在首頁最上方放一段自動播放、無聲、循環的短片，文字與按鈕疊在影片上。它的效果來自「動起來的照片」，爐火、海浪、金屬反光這類題材用影片比靜態圖有感。

影片背景有兩個硬規則。第一是必須靜音：MDN 的自動播放指南說明，瀏覽器只允許靜音或音量為零的影片自動播放，有聲音的影片會被擋下，要等訪客點擊才能播。第二是檔案要小：一段 10 秒的高畫質影片動輒十幾 MB，在手機網路上會拖慢整頁，首屏要先放一張靜態封面圖，影片載入完再接上。

轉場與微互動：細節決定質感

轉場是切換頁面或區塊時的過場，微互動是按鈕被按下、表單送出成功、選單展開時的小動效。它們單獨看很小，合起來決定網站「貴不貴」的感覺。

這類動效有一條時間門檻。Nielsen Norman Group 的動畫可用性研究指出，訪客自己觸發的動作，效果必須在 0.1 秒內開始，才會有「我在直接操作」的感覺；超過就會覺得網站卡。同一篇研究也提醒，會重複出現的動畫會拖慢使用者，受訪者的原話是第一次看很好，之後就開始煩。所以漢堡選單展開、每次切頁都要等一段動畫，是最常見的扣分項。

哪些品牌適合動畫網站

靠視覺、氛圍、質感成交的品牌最適合動畫網站，因為訪客進站的目的就是「感受這家店」。以下四個展示站是 AEL 用動態版型做的範例，可以直接開來看效果，它們是展示用途，店名與內容皆為虛構。

• 餐廳與餐酒館：炭火、油花、擺盤用影片背景與捲動揭露最有感。展示站：焰谷炭烤牛排館。
• 建案與房地產：外觀、公設、戶型需要一層層往下看，捲動動畫天生適合。展示站：雲璽 THE APEX。
• 精品與手工藝：機芯、皮革、金屬紋理用大圖加細微動效最能傳達工藝。展示站：衡刻製錶工作室。
• 珠寶與婚戒：光澤與切面要靜中有動，轉場與微互動比大動作更合適。展示站：晨曦珠寶。

另外兩類也常用動畫網站：民宿與飯店（房間與景觀）、設計與攝影工作室（作品本身就是視覺）。共同點是客人願意花一到兩分鐘「逛」網站，而且逛完會留下聯絡或預約。

哪些店家不需要動畫網站

客人只想快速查一件事的店家，不需要動畫網站。小吃店、診所、修車廠、補習班的訪客多半在找營業時間、電話、地址、價格，每多一秒動畫就多一分流失。

判斷方法只有一個問題：客人打開網站，是來「感受」還是來「查」。來感受的，動畫能加分；來查的，第一屏就要出現電話、地址與營業時間，動畫放在第二屏以下，或完全不放。

動畫網站的三個代價：速度、動暈、注意力

動畫網站要付三個代價，每一個都有公開的門檻可以對照。

速度門檻

Google 用 Core Web Vitals 衡量網站體驗，web.dev 的門檻說明列出三個數字：最大內容繪製（LCP）要在 2.5 秒內、互動到下一次繪製（INP）要在 200 毫秒內、累積版面位移（CLS）要低於 0.1，而且是以 75% 的訪客都達到為準。影片背景與大張動畫圖最常撞到的是 LCP，首屏載入慢，排名與轉換都受影響。

動暈與無障礙

有一群訪客看到視差捲動、放大縮小的畫面會頭暈甚至噁心。MDN 的 prefers-reduced-motion 說明指出，前庭功能異常的使用者會因為非必要的動態效果感到不適，大範圍的縮放與平移尤其容易觸發；手機與電腦的系統設定裡都有「減少動態效果」的選項，網站可以偵測並提供安靜版本。web.dev 的同主題文章進一步建議，對開了減少動態的訪客，連自動播放的影片都應該停掉，改放靜態圖。

另有一條無障礙規範管「會動多久」。W3C 的 WCAG 2.2.2 說明規定，自動開始、持續超過 5 秒、而且跟其他內容同時出現的移動或捲動內容，必須提供暫停、停止或隱藏的方式。循環播放的影片背景與輪播圖都算在內，所以要有一顆暫停鍵。

注意力

動畫會搶注意力，搶對地方是加分，搶錯地方是扣分。Nielsen Norman Group 的同一篇研究將動畫分成功能性與裝飾性兩類：功能性動畫用來提示重要元素、顯示前後狀態的關係；純裝飾、為了「看起來很現代」而加的動畫風險最高，成年訪客目標明確，對這類效果的耐受度低。每加一個動效前先問：訪客現在在看哪裡？這個動效想讓他做什麼？

上線前的檢查清單

動畫網站上線前照下面八項逐一確認，每一項都能自己動手測。

1. 用 4G 網路開手機版，首屏主要內容在 2.5 秒內出現。
2. 影片背景有靜音、循環、在手機上內嵌播放，不會跳成全螢幕播放器。
3. 影片載入前先顯示一張靜態封面圖，不會留一塊黑。
4. 有一顆看得到的暫停鍵，能停下影片背景與輪播。
5. 在手機設定開啟「減少動態效果」後再開一次網站，動畫關掉、內容完整可讀。
6. 按鈕、選單、表單的回應在 0.1 秒內開始，沒有要等完才能操作的動畫。
7. 電話、地址、營業時間、聯絡按鈕不被動畫遮住，捲動到一半也找得到。
8. 每個區塊的文字單獨讀也成立，關掉動畫後網站仍然說得通。

動畫網站怎麼開始

先決定客人進站是來感受還是來查，再決定要不要做動畫網站。確定要做的話，從一段影片背景或一組捲動揭露開始，不要一次全上。

AEL 的網站服務建置費 0 元，一般官網每月 NT$399 起，附後台網站每月 NT$1,499 起，企業定製依需求報價。團隊有 10 年以上經驗、5,000 個網站上線、10 個產業案例與 30 位夥伴，動態版型上線前會照上面八項檢查一次。你可以先開四個展示站看效果，再到作品頁看其他類型的網站。

常見問題

動畫網站會不會讓 Google 排名變差？

不會因為有動畫就被扣分，影響排名的是速度。Google 的 Core Web Vitals 要求主要內容在 2.5 秒內出現、互動回應在 200 毫秒內、版面位移低於 0.1，影片背景與大張動畫圖最常撞到第一項。檔案壓小、先放靜態封面圖、動畫只在需要時載入，排名就跟一般網站相同。

影片背景可以有聲音嗎？

不行，瀏覽器只允許靜音影片自動播放。MDN 的自動播放指南說明，有聲音的影片會被擋下，要等訪客自己點擊才能播。影片背景一律做成無聲循環，想放聲音就另外放一顆播放鍵讓訪客選。

小吃店或診所適合做動畫網站嗎？

多半不適合。訪客打開小吃店或診所網站是來查營業時間、電話、地址，每多一秒動畫就多一分流失。第一屏直接放這三樣資訊，動畫放在第二屏以下或不放，反而比較容易成交。