如何使用 GSAP ScrollTrigger 实现滚动背景色渐变动画-html教程-PHP中文网

如何使用 GSAP ScrollTrigger 实现滚动背景色渐变动画

本文详解 gsap scrolltrigger 背景颜色滚动动画的正确配置方法，涵盖必备依赖、触发条件、高度设置等关键要点，并提供可直接运行的完整示例代码。

本文详解 gsap scrolltrigger 背景颜色滚动动画的正确配置方法，涵盖必备依赖、触发条件、高度设置等关键要点，并提供可直接运行的完整示例代码。

GSAP 的 ScrollTrigger 是实现高性能滚动驱动动画的强大插件，但初学者常因基础配置缺失导致动画“不生效”。你遇到的 .page2 背景色无法随滚动渐变的问题，通常并非代码逻辑错误，而是页面可滚动空间不足或依赖未正确加载所致。

✅ 核心前提：确保页面具备足够滚动高度

ScrollTrigger 需要目标元素（如 .page2）在视口中有明确的进入/离开过程。若 .page2 仅设 height: 100vh，且其前后无其他内容，则整个页面无滚动行为——ScrollTrigger 将无法计算滚动位置，自然不会触发动画。

✅ 正确做法：为 .page2 设置 height: 200vh（或更高），或在其前后添加占位内容（如

），确保页面总高度 > 视口高度。

✅ 必备依赖：按顺序引入脚本

必须显式引入并注册插件，且顺序不可颠倒：

<!-- 在 </body> 前引入 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script><script>
  gsap.registerPlugin(ScrollTrigger); // 必须在使用前注册！
</script>

⚠️ 注意：CDN 链接中邮箱地址为防爬虫混淆写法（如 [email protected]），实际使用时请替换为标准 URL，例如 https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js。

✅ 完整可运行示例（含修复后代码）



  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>GSAP ScrollTrigger 背景渐变示例</title><style>
    * { margin: 0; padding: 0; }
    body { overflow-x: hidden; } /* 防止横向滚动干扰 */

    .page2 {
      background-color: #efeae3;
      height: 200vh; /* ✅ 关键：提供足够滚动空间 */
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: #333;
    }
  </style><!-- 占位内容，确保 .page2 可被滚动触发 --><div style="height: 100vh; background: #fff;"></div>
  <div class="page2 page">滚动查看背景色变化 →</div>
  <div style="height: 100vh; background: #f9f9f9;"></div>

  <!-- 按顺序加载 GSAP 及插件 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script><script>
    gsap.registerPlugin(ScrollTrigger);

    function squareMove() {
      gsap.timeline({
        scrollTrigger: {
          trigger: ".page2",
          scrub: true,     // ✅ 启用平滑滚动绑定（非一次性触发）
          start: "top top",   // 元素顶部对齐视口顶部时开始
          end: "bottom bottom" // 元素底部对齐视口底部时结束
        }
      }).to(".page2", {
        backgroundColor: "#b1b1b1",
        duration: 1
      });
    }

    squareMove(); // 立即执行初始化
  </script>