當我們瀏覽網站，捲動通常只是從一段文字移向下一段。但在某些網站裡，捲動會改變資料、影像與視覺焦點，成為理解故事的節奏。這種設計稱為 Scrollytelling（捲動敘事）。
真正好的捲動敘事並不只是讓元素淡入、放大或產生視差；它讓每一次前進都有資訊上的理由。使用者在畫面改變後，應該更理解一個問題，而不只是看到一段漂亮的動畫。
每一次捲動，都應該推進理解，而不只是推動畫面。
01｜什麼是 Scrollytelling？
透過捲動來控制資訊揭露、視覺變化及敘事進度。它是一種內容組織與互動設計方法，而非特定的動畫效果。
傳統頁面將資訊按順序排好，讀者往下看；Scrollytelling 進一步讓圖表、場景或內容狀態跟著閱讀進度改變。例如城市人口地圖可以先顯示概況，然後依年代逐步凸顯變化，減少讀者在多張圖間自行比對的負擔。
Scroll Animation（捲動動畫） 是工具；Scrollytelling（捲動敘事） 是目的。前者可以服務後者，但不代表加入特效就等於有好的故事。
02｜先寫故事，再安排動畫
從一個簡單問題開始：「讀者離開這個畫面時，應該理解什麼？」一段完整的體驗可以拆成五步：
Hook
Context
Progression
Insight
Resolution
1引起好奇：提出值得探索的問題
開頭要建立閱讀動機，而非一次塞入全部答案。介紹海洋污染時，可以先用一張具情境的照片與明確提問，讓讀者知道故事為何重要。
2建立背景：提供理解所需的資訊
使用簡短文字、關鍵數據與地圖，先讓讀者認識規模及脈絡。背景不足會讓後續動畫變得難以理解。
3逐步揭露：一次呈現一項新發現
把複雜圖表拆成觀察、比較、變化與影響。每個畫面接續上一段，而不是重複同一種進場動畫。
4聚焦洞察：給重要訊息留下空間
進入關鍵結論時可以放慢節奏甚至暫停動態。畫面安靜下來，反而能突出真正重要的發現。
5引導下一步：讓故事有完整的落點
最後連結至資料來源、延伸閱讀、產品資訊或下一步行動。敘事不該隨著動畫播放完畢便突然結束。
03｜五種有意義的捲動敘事模式
模式一｜固定視覺＋捲動文字
左側或右側固定一張圖表，另一側文字隨捲動切換說明。讀者得以維持視覺基準，逐步比較不同階段，適合資料報導、產品結構和研究說明。
互動模式示意｜同一張圖，三個觀察角度
先辨識整體趨勢，不急於展示所有細節。
再讓不同階段之間的差異變得清楚。
最後聚焦重要結論，避免視覺效果喧賓奪主。
這是一個無需 JavaScript 的黏著式閱讀示範：桌面端固定視覺、手機端自然依序閱讀。
模式二｜逐步揭露（Progressive Reveal）
從簡單骨架開始，依序加入產品組件、資料流或架構層級。讀者先理解基本結構，再掌握複雜關係。
模式三｜視覺轉換（Visual Transformation）
將同一物件從一種表示轉到另一種表示，例如資料點排列成圖表。轉場應保持視覺對應，讓人追蹤相同元素的變化。
模式四｜空間旅程（Spatial Journey）
透過地圖、建築、攝影或場景切換建立方向感，適合歷史、場域介紹與地理敘事。避免太大的鏡頭運動造成暈眩。
模式五｜章節敘事（Chapter-based Storytelling）
將長篇內容切成具節奏的章節：攝影建立情境、圖表解析證據、文字提出觀點。各章有不同形狀，不必每段都套用同一動畫。
04｜實際案例：資料新聞與產品網站
The Pudding 以視覺化報導呈現文化和社會議題，其作品常把資料、互動圖表及文字結合，使讀者逐步形成觀察。值得學的不是某一種動畫，而是先提出敘事問題，再安排視覺狀態。
產品網站也可以藉此逐層拆解設備、呈現製造流程，或說明一個複雜功能。然而需要快速查看價格、規格或完成交易的頁面，不必強迫使用者觀看整段沉浸式動畫。設計必須回應任務，而不是追逐形式。
設計判準：如果移除動畫後，內容依然完整、清晰且容易理解，代表有好的資訊基礎；如果動畫能進一步讓複雜關係更易懂，才有增加它的理由。
05｜實作技術：從 Sticky 到 Scroll-driven Animations
最基本的 Scrollytelling 可以只用語意化 HTML、CSS Grid 與 position: sticky 實現。較進階的效果可使用 CSS Scroll-driven Animations，把動畫進度和捲動位置相連，不必一直監聽 scroll 事件。
例如在支援的瀏覽器中，以下寫法可讓閱讀進度條隨頁面捲動成長：
.reading-progress {
transform-origin: left;
animation: grow linear both;
animation-timeline: scroll(root block);
}
@keyframes grow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}請先準備不依賴動畫的完整正文，然後逐步增強效果；使用 CSS 新功能時要檢查目標瀏覽器支援情況。技術參考可查閱 MDN Scroll-driven Animations 與 animation-timeline 文件。
06｜行動裝置不是桌面動畫的縮小版
桌面可能適合左右分欄、Sticky 圖像與較長的視覺場景；在手機上卻可能佔滿畫面。因此同一篇文章必須重新安排節奏：文字後面緊接對應圖片、減少大幅度視差，讓頁面可以自然地向下閱讀。
設計重點是保留相同的資訊與故事，而非在每一種裝置上強求完全一樣的動畫。
07｜效能與無障礙：讓所有人都能讀懂故事
- 降低動態：尊重
prefers-reduced-motion，減少鏡頭移動、縮放與視差，但保留所有重要資訊。 - 鍵盤可用：不要用捲動攔截（Scrolljacking）阻止使用者跳過、返回或自然瀏覽。
- 語意與替代內容：關鍵結論應保留在 HTML 正文中，而非只存在於 Canvas 或動畫狀態裡。
- 效能：選用適當尺寸的圖片、非首屏延遲載入；盡量使用
transform、opacity等容易維持流暢度的效果。
參考 web.dev 的動態無障礙指南，為需要減少動態的使用者提供可理解的替代體驗。
08｜規劃一篇捲動故事的檢查表
| 敘事階段 | 希望讀者理解 | 視覺策略 |
|---|---|---|
| 開場 | 為什麼這個問題重要？ | 提問與主題攝影 |
| 背景 | 需要先知道哪些事？ | 關鍵數字與簡短說明 |
| 發展 | 發生什麼變化？ | 逐步揭露 |
| 比較 | 差異在哪裡？ | 固定圖表＋捲動文字 |
| 洞察 | 最重要的結論？ | 降低動態，聚焦訊息 |
| 結尾 | 下一步能做什麼？ | 摘要與相關連結 |
每規劃一段動畫，問自己：「拿掉它，讀者會不會少理解一件事？」 如果不會，這段動畫可能沒有必要。
常見問題 FAQ
Scrollytelling 和視差捲動（Parallax）有什麼差別？
視差是不同圖層以不同速度移動的視覺效果；捲動敘事是透過閱讀進度組織資訊。視差可以作為工具，但不是必要條件。
所有網站都適合使用捲動敘事嗎？
不是。需要逐步解釋複雜概念、變化與故事的內容特別適合；快速購物、填寫表單或查詢資訊的頁面應優先簡潔易用。
Scrollytelling 會影響 SEO 嗎？
本身不必然影響 SEO，但若重要內容只能在動畫或 Canvas 中取得，就可能不利於理解與索引。保留語意化 HTML 正文、標題與替代文字十分重要。
製作 Scrollytelling 一定需要 JavaScript 嗎？
不一定。基本敘事可以用 CSS Sticky 完成，進階視覺效果可採 CSS Scroll-driven Animations；複雜資料互動才需要更多 JavaScript。
如何衡量捲動敘事是否成功？
觀察使用者是否理解核心訊息、是否能完成任務，以及手機和減少動態模式下的體驗，而非僅以停留時間或動畫數量判斷。
結語｜讓讀者記住故事，而不是特效
Scrollytelling 的力量來自對資訊順序的精確安排。真正成熟的設計會在需要時讓畫面變動，也會在關鍵段落安靜下來。當動畫成為解釋工具，而非裝飾，捲動才會是有意義的敘事體驗。
好的捲動敘事，讓人記得洞察，而不只是技術。