往下捲,故事就往前推進

一個 Progressive Scrolling 示範:固定視窗、段落浮現、橫向軌道隨垂直捲動展開。

開始捲動

釘住左側,右側繼續說

左側標題固定在視窗裡,右側段落隨捲動一則一則浮現——這是 Progressive Scrolling 最常見的敘事骨架。

Sticky + Reveal

先建立錨點

position: sticky 把關鍵訊息留在畫面,讓讀者在長捲動中不會失去方向。

Scroll Progress

再用節奏推進

每個段落只在進入視窗時變清楚,形成「讀到哪、亮到哪」的漸進感。

One Job

一區一件事

區塊不塞多餘資訊:標題說明機制,段落示範效果,捲動本身就是互動。

深度靠層次,不是靠卡片

背景色、字重與透明度變化,就能做出段落之間的落差,不需要堆疊框線與陰影。

Parallax

前景動得比較快

Hero 的山脊層以不同速度平移,營造空間感——同一畫面、多層速率。

Atmosphere

漸層當空氣

色卡來自 Coolors:Ink、Teal、Mist、Slate、Coral,整站只靠這五色呼吸。

Motion

動作要有目的

入場、浮現、橫移——每個動畫都在告訴你「現在走到哪一層敘事」。

垂直捲動,驅動橫向軌道

接下來這段會把「向下」轉換成「向右」:同一套捲動輸入,換一種空間輸出。

Map Scroll → X

把進度映射成位移

讀取區塊在視窗中的進度百分比,再乘上軌道可移動寬度,就得到橫移距離。

Pin the Viewport

先卡住再滑動

外層拉高高度製造捲動餘裕,內層 sticky 住視窗,使用者會感覺畫面「停住後側滑」。

Next

準備好了就往下

看完右側三則後,繼續捲動會進入真正的橫向軌道示範。

橫向軌道

繼續往下捲——面板會向左滑過。這是 Progressive Scrolling 的經典變體。

Panel 01

鎖定視窗

Panel 02

計算進度

Panel 03

映射位移

Panel 04

完成一段敘事

捲動不是裝飾, 是敘事節奏。

CASCADE 示範到此:進度條、視差、釘住章節、橫向軌道——同一套捲動語彙。