实验室

滚动驱动

把滚动条当时间轴。用滚轮擦洗一段转场、而不是让它按定时器自己播完，是「会回应你」和「只是有动画」的分界线 —— 也是开销最容易失控的地方。

滚动叠层转场

每一屏吸在顶部，下一屏爬上来盖住它。下面那层从不被推走 —— 它是被盖住、压暗、后退 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
全部分类