当前位置：首页 > 文章列表 > 文章 > 前端 > 滚动触发动画，实现网页动态效果

滚动触发动画，实现网页动态效果

2026-04-02 14:54:39 0浏览收藏

本文深入浅出地讲解了如何用原生 JavaScript 和 CSS 实现高性能、零依赖的“滚动触发动画”，聚焦解决开发者常踩的 DOM 选择错误、jQuery 误用、动画逻辑缺陷和 scroll 事件性能卡顿等痛点，重点推荐现代标准方案——Intersection Observer API，并提供开箱即用的完整代码（含 HTML 结构、CSS 过渡细节与防抖优化的 JS 观察逻辑），同时兼顾旧浏览器兼容策略与无障碍增强技巧，让任何元素只需添加一个类就能实现流畅自然的视口入场动画，真正兼顾简洁性、健壮性与可扩展性。

本文介绍如何使用原生 JavaScript 和 CSS 实现“滚动触发动画”（如淡入效果），解决常见 DOM 选择错误、库依赖混淆及性能隐患，提供可直接运行的轻量级实现方案。

实现滚动触发动画的核心逻辑是：监听用户滚动行为 → 判断目标元素是否进入视口 → 动态添加动画类。相比依赖 jQuery 的旧方案，现代开发推荐使用原生 JavaScript + Intersection Observer API，它性能更优、兼容性良好（支持 Chrome 76+/Firefox 76+/Edge 79+），且无需手动计算滚动位置与元素偏移。

✅ 正确实现步骤（无第三方库）

1. HTML 结构（语义清晰，无需 ID 冗余）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>滚动触发动画</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 页面顶部留白，便于测试滚动 -->
  <div style="height: 120vh; background: #f5f5f5;"></div>

  <!-- 目标元素：添加 data-animate 属性标识需动画的元素 -->
  <h1 class="anim-target">Hello, I fade in on scroll!</h1>

  <div style="height: 200vh;"></div>
  <script src="script.js"></script>
</body>
</html>

2. CSS 动画定义（分离样式与行为）

/* style.css */
.anim-target {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

⚠️ 注意：transition 必须写在基础类（.anim-target）中，而非 .is-visible 中，否则首次添加类时无过渡效果。

3. JavaScript 逻辑（高效、防抖、可复用）

// script.js
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        // 可选：触发后停止观察，节省资源
        observer.unobserve(entry.target);
      }
    });
  },
  {
    threshold: 0.1 // 当 10% 元素进入视口即触发
  }
);

// 观察所有带 data-animate 或自定义 class 的元素
document.querySelectorAll('.anim-target').forEach(el => {
  observer.observe(el);
});

❌ 原代码问题深度解析

选择器错误：document.getElementById("anim") 却给元素设 class="anim"，ID 未定义导致 obj 为 null；
jQuery 误用：代码混用 jQuery（$(...)）但未引入 CDN，浏览器报错 ReferenceError: $ is not defined；
逻辑缺陷：else 分支仍添加 fade 类，导致动画无法重置；且未移除类，重复滚动会失效；
性能风险：scroll 事件高频触发，未节流/防抖易造成卡顿。