JavaScript Academy · 课时

滚动触发的动画

Q: 「滚动触发的动画」这节课中我会学到什么？

在元素进入视口时为其添加动画。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在元素进入视口时为其添加动画。

滚动触发的动画 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

在滚动时添加动画

一种常见效果是：当用户滚动到元素所在位置时，让元素淡入或滑入视口。Intersection Observer 可以简洁地实现这一点：当元素进入视口时添加 CSS class，再让 CSS 处理动画。

CSS 部分

在 CSS 中定义隐藏的初始状态和可见的最终状态。JavaScript 只负责切换 class；过渡效果完全由 CSS 实现，因此更加流畅。

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

选择目标

为想要添加动画的元素设置一个共同的 class，然后将它们收集起来。

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

创建 observer

使用 threshold，让动画在元素有一定比例可见时开始，而不是只在一个像素可见时就开始。

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

添加 class

在回调中，为发生相交的目标添加 visible class。随后 CSS 会让它们以动画形式进入视口。

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

只运行动画一次

如果只想显示一次，请在添加 class 后取消观察该元素，这样它滚出视口再返回时就不会再次运行动画。

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

双向重复动画

如果希望元素离开视口时也运行动画，请根据 isIntersecting 切换 class，并继续观察。

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

开始观察

观察每个目标以开始跟踪。用户滚动经过每个目标时，observer 会触发。

items.forEach(el => observer.observe(el));

错开动画

通过设置递增的过渡延迟来创建级联效果。您可以根据 data 属性或元素的索引来设置延迟。

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

尊重减少动态效果设置

有些用户更喜欢减少动态效果。请检查媒体查询，并为这些用户跳过动画，直接显示内容。

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

性能优势

由于繁重的工作由 CSS 过渡完成，而可见性检测也交给浏览器处理，即使元素很多，滚动动画仍能保持流畅。不需要计算滚动事件，也不会出现卡顿。

快速检查

测试您对滚动触发动画的理解。

回顾

您实现了滚动触发的动画：

在 CSS 中定义隐藏状态和可见状态。
使用合理的 threshold 观察目标。
在发生相交时切换 class，由 CSS 执行动画。
使用 unobserve 实现一次性显示。
尊重 prefers-reduced-motion 设置。

您已完成 Intersection Observer。接下来学习 Web 工作线程。

常见问题解答

「滚动触发的动画」课时是免费的吗？

是的 — 「滚动触发的动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「滚动触发的动画」这节课中我会学到什么？

在元素进入视口时为其添加动画。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「滚动触发的动画」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy