A Scroll-Driven Editorial
动象

KINETIC

滚动,就是叙事本身。这是一部由你的滚轮驱动的页面——每一格都在响应你的节奏。

向下,启动
01 能力 · Capabilities
横向滚动 →
/ 01

Scroll
Driven

滚动位置即时间轴。标题视差、横向平移、进度映射——页面随你的手指起舞。

/ 02

横向叙事

垂直滚轮,横向展开。把宽度交给滚动,让信息像胶片一样一格一格过。

VERTICAL → HORIZONTAL
/ 03

鼠标视差

图层按深度分层,随指针轻轻偏移。二维平面里骗出三维的呼吸。

DEPTH · LERP · 60FPS
/ 04

磁性交互

按钮被光标吸引,光标被元素放大。每一处停留都有物理反馈。

MAGNETIC · ELASTIC
/ 05

字阵实验

字母感知光标的距离,被推开、染红、回弹。文字第一次有了重量。

REPULSION FIELD
/ 06

可访问降级

尊重 prefers-reduced-motion 与触屏:动效全关,信息全留,体验不打折。

A11Y · COARSE POINTER
02 宣言 · Manifesto

好的界面会。它在滚动时呼吸,在停留时低语,在触碰时回应。动效不是装饰,是语言

03 深度 · Depth

移动鼠标,感受纵深

▣ LAYER A

前景层

深度 0.5,跟随最紧,最先被你察觉。

▣ LAYER B

中景层

深度 0.25,温和漂移,构建空间。

▣ LAYER C

远景

深度 0.1,几乎不动,是地平线。

▣ LAYER B+

中前景

深度 0.4,节奏在前。

▣ LAYER C+

远中景

深度 0.15,缓慢如云。

▣ LAYER A+

最前景

深度 0.6,几乎贴着光标。

04 字阵 · Repulsion Field

把光标推进字里。

光标即斥力场 · 字母被推开并染红
Interlude

MOTION is LANGUAGE.

动,是界面唯一的语言。静止的页面是死的——这里没有一帧是静止的。

05 度量 · By the Numbers
0fps
渲染目标
0
交互维度
0
框架依赖
1
个 HTML 文件

让界面动起来

从一行滚动监听到一整部交互电影。如果你也相信界面应当有节奏——开始吧。

开启对话