趣味 JavaScript 挑战：30 天变身编程高手

JavaScript 30 天编码挑战——第 13 天

欢迎来到 JavaScript 30 天编码挑战的第 13 天！今天，我们将学习如何创建一个「滑动显示」的效果，让页面中的元素在滚动时平滑地出现。

一、效果展示

以下是可以作为示例的两个 HTML 页面：

• index-START.html：此页面显示元素在滚动前是隐藏的。
• index-FINISHED.html：此页面显示元素在滚动时平滑地出现。

二、实现

要实现「滑动显示」的效果，我们需要使用 JavaScript 中的 Intersection Observer API。该 API 允许我们观察元素何时进入或离开视口。

以下是如何使用 Intersection Observer API 实现该效果：

1. 在 HTML 页面中，添加要观察的元素。
2. 创建一个 Intersection Observer 对象，并指定要观察的元素和观察选项。
3. 当元素进入或离开视口时，Intersection Observer 对象将触发一个回调函数。
4. 在回调函数中，我们可以添加或移除元素的 CSS 类来实现「滑动显示」的效果。

以下是详细的实现步骤：

1. 在 HTML 页面中，添加要观察的元素。

<div id="element-to-observe">
  <h1>标题</h1>
  <p>段落</p>
</div>

2. 创建一个 Intersection Observer 对象，并指定要观察的元素和观察选项。

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口
      entry.target.classList.add('is-visible');
    } else {
      // 元素离开视口
      entry.target.classList.remove('is-visible');
    }
  });
}, {
  threshold: 0.5
});

3. 当元素进入或离开视口时，Intersection Observer 对象将触发一个回调函数。

observer.observe(document.querySelector('#element-to-observe'));

4. 在回调函数中，我们可以添加或移除元素的 CSS 类来实现「滑动显示」的效果。

.is-visible {
  opacity: 1;
  transform: translateY(0);
}

以上就是 JavaScript 30 天编码挑战的第 13 天，希望对你有帮助！