SCROLL STORY SCROLL
01视口捕获
IntersectionObserver 监听元素进出视口,触发出场动画与计数器。
02进度映射
滚动距离被实时映射为 0–1 的进度值,驱动进度条与视差位移。
03钉住叙事
sticky 容器钉住整屏,滚轮变成翻页器,步骤逐一点亮。
04形态演化
同一颗视觉体随步骤改变圆角、旋转、模糊 —— 形态即叙事。
每一个计数器都在进入视口的瞬间开始奔跑 —— 这是滚动给数据的第一次心跳。
IntersectionObserver 监听元素进出视口,触发出场动画与计数器。
滚动距离被实时映射为 0–1 的进度值,驱动进度条与视差位移。
sticky 容器钉住整屏,滚轮变成翻页器,步骤逐一点亮。
同一颗视觉体随步骤改变圆角、旋转、模糊 —— 形态即叙事。
Canvas 绘制的橙金粒子缓慢上浮,鼠标掠过时被轻轻推开。
所有容器与按钮采用直角切角轮廓,拒绝圆润的平庸。
backdrop-filter 模糊层叠加细金描边,悬浮于黑灰之上。
按钮与卡片自带斜向高光扫过,像金属反光的一次呼吸。
标题以逐字打印的方式登场,光标在末尾固执地闪烁。
背景巨字与前景内容以不同速率位移,滚动产生纵深。
sticky 把章节钉在视口里,滚轮变成叙事的翻页器。
纵向滚动被翻译成横向位移,卡片依次滑入舞台。
reveal 队列按观察顺序依次点亮,节奏像一组鼓点。
520px 的橙色光晕跟随指针,在黑底上拖出柔软的尾迹。
分隔区的同心圆持续扩散,按钮点击也会绽开一次涟漪。