使用 IntersectionObserver 实现的滚动淡入动画

👀 实行演示

💡 此模板的用途与优势

本模板可在页面滚动时，为进入视口的元素添加平滑淡入动画效果。

• ✅ 自然地引导用户注意力（减少遗漏内容）
• ✅ 不一次性显示所有内容，提高页面可读性
• ✅ 使用 IntersectionObserver 可实现图片,图表等的延迟加载
• ✅ 模板轻量且易于自定义，适用于落地页,商品列表,常见问题等
• ✅ 简单的动画即可提升页面整体印象

可通过 CSS 轻松调整动画的速度与位移距离，便于根据个人喜好进行定制。

📋 可复制的代码

<style>
.box {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  margin: 1rem 0;
  font-size: 1.5rem;
}
.box.visible {
  opacity: 1;
  transform: translateY(0);
}
</style>

<div class="box fadein">🍎 Apple</div>
<div class="box fadein">🍊 Orange</div>
<div class="box fadein">🍌 Banana</div>
<div class="box fadein">🍇 Grape</div>
<div class="box fadein">🍉 Watermelon</div>

<script>
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      observer.unobserve(entry.target); // 只触发一次
    }
  });
});
document.querySelectorAll(".fadein").forEach(el => observer.observe(el));
</script>

      📋 复制
    

🧩 IntersectionObserver 的工作原理與實用技巧

IntersectionObserver 是一個瀏覽器 API，可以偵測元素是否進入了可視範圍（viewport）。與傳統的 scroll 事件相比，它更高效、資源消耗更少，特別適合用於動畫效果的觸發。

🔍 可以應用在哪些場景？

除了動畫顯示外，它也常用於圖片或影片的懶加載、廣告展示觸發、以及其他與滾動互動有關的功能。

⚙ 使用小技巧

為了提高效能，建議在元素進入視口後使用 unobserve() 取消監聽。此外，如果有多個目標元素，可以配合 querySelectorAll() 搭配迴圈分別註冊監聽。

結合動畫時，IntersectionObserver 能讓網頁變得更有吸引力。別忘了在 CSS 中調整 transform 和 transition 屬性，以打造流暢自然的進場效果。