返回随笔目录

给博客加一套动效系统:GSAP + ScrollTrigger

入场、横轨、打字机——把动效参数收敛进一份规范文档。

动效不是装饰

好的动效是信息的引导:入场告诉用户「这里开始了」,横轨告诉用户「这是一组并列内容」。

动效必须尊重 prefers-reduced-motion,这是可访问性的底线。

参数即风格

ts
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)

所有参数收敛进一份规范文档,整站动效才有统一的性格。

8 人觉得有用

评论 0

还没有评论

来抢第一个座位。

万物皆有裂痕,那是光照进来的地方

© 2026 My House个人博客 / 生活记录

鄂ICP备2026035994号-1

本站内容仅代表个人观点,转载请注明出处。