LOCAL STUDY / 01 FADE IN UP · STAGGER

TEXT ENTRY / 文字进入

让文字
有一点呼吸。

文字会轻轻上移并出现。适合首页主标题、介绍文字和重要区块,帮助建立阅读顺序,不抢内容的戏。

opacity 0 → 1 / y 24 → 0

MOTION LIBRARY / 动效样式

同一段文字,七种进入方式。

01 / FADE IN 淡入

轻轻出现,不改变位置。

opacity 0 → 1
02 / FADE IN UP 淡入上移

从下方上移,最常用的入场。

opacity + y
03 / SLIDE IN 横向滑入

从侧面滑进画面。

x -32 → 0
04 / BLUR REVEAL 模糊揭示

从模糊变得清晰。

blur 10px → 0
05 / MASK REVEAL 遮罩揭示

像被一条线揭开。

clip-path reveal
06 / TYPEWRITER 打字机

像打字一样出现。

width + steps()
07 / CHARACTER REVEAL 逐字出现

逐 字 显 现 。

stagger by letter

USAGE NOTES / 使用边界

动效先服务阅读,再增加节奏。

01 / 适合

建立层级和进入节奏

用于首页主标题、区块标题和短介绍,让视线按内容优先级进入;同一屏只保留少量进入方式。

02 / 不适合

不能遮挡任务与正文

导航、表单错误、长正文和关键按钮不应依赖动画才出现,也不应用持续模糊或过长延迟妨碍读取。

03 / 移动端

缩短距离和时长

小屏优先减少位移、视差和连续播放,避免进入动画与滚动同时争夺注意力。

04 / 无障碍

静态版本必须完整

尊重减少动态偏好;内容顺序、焦点和按钮名称在没有动画、脚本失败或键盘操作时仍保持成立。

FROM STUDY TO PROJECT / 从实验到项目

真正放进网站时,我们只留能帮助阅读、又不拖慢页面的动效。

看哪些内容值得被注意,再决定怎么动、手机上怎么收。

查看网站建设服务 返回 Studio Lab 看页面该怎么动