首屏背景图

SMOOTH SCROLLING

Lenis 平滑滚动 动效研究

原生体验级滚动 + 滚动驱动动画。滚动页面,观察每一段动效。

视差

PARALLAX

滚动驱动

SCROLL

LENIS

动效研究

弧形图廊

ARC · 沿弧线铺开

弧形图1
弧形图2
弧形图3
弧形图4
弧形图5

之字交错

ZIGZAG · 上下错落滑入

之字图1
之字图2
之字图3
之字图4

堆叠展开

STACK · 一叠翻开展示

堆叠图1
堆叠图2
堆叠图3
粘性缩放图

Sticky Scale

图片粘住视口,于滚动过程中从中心放大到全屏,形成剧场感节奏。

当滚动被驯服,文字的每一次入场都是一次呼吸。

段落一:缓缓浮现,字距舒展。

段落二:错落进入,节奏分明。

段落三:淡入淡出,收放自如。

数字滚动

COUNT-UP · 随滚动增长

0 平滑滚动帧率
0 动效模块
0 滚动事件毫秒内同步
0 接近原生沉浸度

掩码揭示

MASK REVEAL · 从上揭幕

掩码揭示图
背景缩放图

背景随滚动放大

ZOOM ON SCROLL

由模糊到清晰

滚动进入,每一个字都被唤醒。

SVG 描线

DRAW LINE · 边随滚动画出

SVG 表现的多种可能

LAB · 六种描线形式

① 虚线流动 · DASH FLOW

② 几何一笔画 · GEOMETRY

③ 文字一笔画 · LETTERING

④ 多路径依次 · MULTI-PATH

⑤ 环形进度 · RING

⑥ 手写连笔 · HAND WRITING