使用 GSAP 的 ScrollTrigger 外掛來製作背景視差滾動效果

要使用 GSAP 的 ScrollTrigger 插件來製作背景視差滾動效果，你可以遵循以下步驟：

步驟 1: 匯入 GSAP 和 ScrollTrigger

首先，確保你的項目中已經包含了 GSAP 和 ScrollTrigger 外掛。你可以通過 CDN 或者 npm 來讀入它們。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>
<script>

步驟 2: 準備 HTML 結構

建立你的 HTML 結構，為你想要應用視差效果的元素設定一個容器。

<div class="parallax-container">
    <div class="parallax-background">你的背景內容</div>
    <!-- 其他內容 -->
</div>

步驟 3: CSS 樣式

為了使視差效果更加明顯，你可以設置背景元素的 CSS 樣式。確保 .parallax-background 元素比容器更大或有不同的初始位置。

.parallax-container {
  overflow: hidden;
  position: relative;
}

.parallax-background {
  position: absolute;
  width: 100%;
  height: 200%; /* 使背景更大 */
  top: -50%; /* 初始位置 */
}

步驟 4: 使用 GSAP 和 ScrollTrigger

現在，使用 GSAP 和 ScrollTrigger 創建視差滾動效果。在你的 JavaScript 中，初始化 ScrollTrigger 並創建一個時間線來控制背景元素的移動。

gsap.registerPlugin(ScrollTrigger);

gsap.to(".parallax-background", {
  scrollTrigger: {
    trigger: ".parallax-container",
    start: "top top",
    end: "bottom bottom",
    scrub: true
  },
  y: "30%", // 背景移動的距離和方向
  ease: "none"
});

這些步驟將創建一個基本的背景視差滾動效果。視差效果的程度可以通過調整 CSS 和 GSAP 時間線的參數來改變。這僅是一個基本範例，GSAP 和 ScrollTrigger 提供了大量的自定選項，可以讓你創建更加複雜和有趣的動畫效果。