實驗室

捲動驅動

把捲軸當時間軸。用滾輪擦洗一段轉場、而不是讓它按計時器自己播完，是「會回應你」和「只是有動畫」的分界線 —— 也是開銷最容易失控的地方。

捲動疊層轉場

每一屏吸在頂部，下一屏爬上來蓋住它。下面那層從不被推走 —— 它是被蓋住、壓暗、後退 6%，這才讓「疊層」讀起來像縱深而不是一個列表。

  • Mechanism position: sticky; top: 0; height: 100%
  • Corner 18px 18px 0 0
  • Veil solid #05050a → 0.62

捲動吸附

橫著一甩，它自己停在下一項正中。四條 CSS，零 JavaScript —— 而且慣性物理是瀏覽器自己的，這正是手寫版本永遠差一口氣的原因。

  • Snap x mandatory
  • Align center
  • Scroll padding 22% inline

捲動驅動的 3D 環形輪播

面板繞著觀察者排在一個圓柱上，捲動轉動整個環。每塊的位置只在初始化時算一次，所以每幀的開銷就是父元素上的一個旋轉。

  • Panels 5
  • Angle step 360 / N = 72deg
  • Radius (w/2) / tan(step/2) × 1.25

捲動驅動的場景切換

捲動在幾個整屏場景之間來回擦洗：當前面板帶著 3D 旋轉讓開，下一塊擺進來，圖註是交叉淡入而不是被改寫。

  • Scroll distance 420% of the viewport
  • Perspective 1400px, on the stage
  • Panel offset translateX 68% per slot

全螢幕擴展轉場

捲動把一張小卡片撐開成通欄。卡片本身從不縮放，變的是從它上面裁出來的那個視窗 —— 所以裡面的圖和字全程都是精確的。

  • Scroll distance 320% of the viewport
  • Start window inset(26% 32%) round 18px
  • End window inset(0) round 0
全部分類