给博客加一套动效系统:GSAP + ScrollTrigger
入场、横轨、打字机——把动效参数收敛进一份规范文档。
动效不是装饰
好的动效是信息的引导:入场告诉用户「这里开始了」,横轨告诉用户「这是一组并列内容」。
动效必须尊重
prefers-reduced-motion,这是可访问性的底线。
参数即风格
gsap.fromTo(el, { y: 26, opacity: 0 }, {
y: 0, opacity: 1,
duration: 0.9,
ease: 'power3.out',
})
| 场景 | 时长 | 缓动 |
|---|---|---|
| 区块入场 | 0.9s | power3.out |
| 卡片入场 | 0.75s | stagger 0.035 |
| 主题切换 | 0.6s | cubic-bezier(.25,1,.5,1) |
所有参数收敛进一份规范文档,整站动效才有统一的性格。
评论 0 条
∅
还没有评论
来抢第一个座位。