滾動敘事：讓內容「動」起來

隨著 CSS3/HTML5 普及，滾動驅動動效成為內容頁敘事利器。本文介紹 7 種創意文字展示特效，附 Demo 連結（見原文），適用於長文閱讀、產品介紹、品牌故事頁。

效果詳解

1. PUSH — 推進式揭示

向下滾動時，頂部圖片向上淡出，文章內容從下往上漸顯。視覺上如同內容「推」走圖片，連貫性強。

2. FADE OUT — 渐隱過渡

背景圖向上位移但不消失，底部帶漸變遮罩過渡，視覺舒適無割裂感。

3. SLICED — 切片裂變

圖像從中心向兩側「切開」動畫，極具戲劇張力，適合重大內容揭曉時刻。

4. SIDE — 側邊滑入

滾動時圖像以側邊形式保留展示，內容從另一側進入，適合側重圖片的敘事。

5. FIXED SIDE — 固定側邊

圖像鋪滿上下螢幕固定，內容在側邊滑動，沉浸感極強，適合品牌形象頁。

6. GRID — 九宮格回歸

滾動時大圖縮回列表縮圖網格，用戶可見「自己在讀第幾篇」，導航感強。

7. Jam3 風格 — Banner 收縮

模仿 Jam3 官網：滾動時大圖自動縮為頂部小 Banner，持續品牌露出不干擾閱讀。

避坑指南：動效 ≠ 體驗加分

動畫會延遲閱讀啟動時間，對「只想快速獲取信息」的用戶反成負擔。使用前必問三問：

1. 是否服務於內容敘事節奏？
2. 是否在低端機上流暢（< 16ms/幀）？
3. 是否提供「減少動效」無障礙選項？

原則：動效為內容服務，而非炫技自嗨。