SCROLL VISUAL EXPERIMENT

滚动即视觉

开始滚动 查看叙事
SCROLL
METRICS

数字在滚动中苏醒

每一个计数器都在进入视口的瞬间开始奔跑 —— 这是滚动给数据的第一次心跳。

0
视觉模块
0
帧每秒
0
性能得分
0
交互动效
SCROLL STORY SCROLL

01视口捕获

IntersectionObserver 监听元素进出视口,触发出场动画与计数器。

02进度映射

滚动距离被实时映射为 0–1 的进度值,驱动进度条与视差位移。

03钉住叙事

sticky 容器钉住整屏,滚轮变成翻页器,步骤逐一点亮。

04形态演化

同一颗视觉体随步骤改变圆角、旋转、模糊 —— 形态即叙事。

HORIZONTAL GALLERY

竖滚横移的长廊

01

粒子星尘

Canvas 绘制的橙金粒子缓慢上浮,鼠标掠过时被轻轻推开。

02

切角美学

所有容器与按钮采用直角切角轮廓,拒绝圆润的平庸。

03

玻璃拟态

backdrop-filter 模糊层叠加细金描边,悬浮于黑灰之上。

04

扫光特效

按钮与卡片自带斜向高光扫过,像金属反光的一次呼吸。

05

打字机

标题以逐字打印的方式登场,光标在末尾固执地闪烁。

SCROLLVISUALMOTIONDESIGN黑金橙最骚视觉 SCROLLVISUALMOTIONDESIGN黑金橙最骚视觉
CAPABILITIES

六种滚动语言

视差分层

背景巨字与前景内容以不同速率位移,滚动产生纵深。

钉住整屏

sticky 把章节钉在视口里,滚轮变成叙事的翻页器。

横向长廊

纵向滚动被翻译成横向位移,卡片依次滑入舞台。

出场编排

reveal 队列按观察顺序依次点亮,节奏像一组鼓点。

光标光晕

520px 的橙色光晕跟随指针,在黑底上拖出柔软的尾迹。

波纹涟漪

分隔区的同心圆持续扩散,按钮点击也会绽开一次涟漪。