在滚动里安排节奏

做个人站时，最容易犯的错是“每个地方都想动”。结果是页面很热闹，但没人记得住任何一处。

先决定节奏

我会先写下页面想让访客经历的顺序：

1. 先看到一句话，知道我是谁
2. 再看 2–3 个作品，判断水平
3. 最后才是关于和联系方式

动效只服务这个顺序。首屏的字可以慢一点出现，作品卡片悬停可以快一点，正文阅读页最好完全安静。

三个约束

• 一页只安排一个“wow”
• 只动 transform 和 opacity
• 手机端和 prefers-reduced-motion 下必须能看

代码上的取舍

能用 CSS 就不上库；需要时间线时才引入 GSAP，并且动态 import()。大部分滚动入场，IntersectionObserver 加一个 class 就够了。

const io = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) entry.target.classList.add('is-visible');
  }
}, { threshold: 0.15 });

document.querySelectorAll('[data-reveal]').forEach((el) => io.observe(el));

动效做得好不好，不在于用了什么库，而在于你删掉了多少。