用 GSAP 和 ScrollTrigger 來製作前景的視差滾動效果

在網頁設計中，視差滾動是一種能夠增強用戶體驗的強大效果。使用 GSAP (GreenSock Animation Platform) 與 ScrollTrigger 外掛，你可以輕鬆地創建豐富的滾動動畫，使前景與背景之間的移動產生層次感。本教學將引導你如何使用 GSAP 創建前景視差效果，並如何通過調整參數來使移動效果更加顯著。

1. 安裝 GSAP 和 ScrollTrigger

首先，你需要加入 GSAP 及其 ScrollTrigger 外掛，可以通過 CDN 引入：

<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>

2. 建立基本 HTML 結構

建立包含背景和前景元素的 HTML 結構，前景元素將用於創建視差效果：

<div class="parallax">
  <div class="background"></div>
  <div class="foreground">
    <img src="foreground-image.png" alt="Foreground Image">
  </div>
</div>

3. CSS 樣式設置

使用 CSS 設定背景和前景的基本樣式：

.parallax {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: url('background-image.jpg') center/cover no-repeat;
}

.foreground {
  position: relative;
  z-index: 1; /* 確保前景位於上層 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.foreground img {
  width: 50%;
  transition: transform 0.3s ease-out;
}

4. 使用 GSAP 和 ScrollTrigger 創建視差效果

通過 GSAP 的 ScrollTrigger 插件來實現滾動效果，讓背景和前景以不同速度移動，從而產生視差效果：

gsap.registerPlugin(ScrollTrigger);

// 背景的滾動效果
gsap.to(".background", {
  y: -150, // 背景稍微向上移動
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax",
    start: "top top",
    end: "bottom top",
    scrub: true,
  },
});

// 前景圖片的滾動效果
gsap.to(".foreground img", {
  y: 400, // 調整 y 值來加大移動量
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax",
    start: "top top",
    end: "bottom top",
    scrub: true,
  },
});

5. 增強移動效果的技巧

如果你覺得前景圖片的移動效果不夠明顯，可以考慮以下幾種方法來增強效果：

1. 加大移動量 (y 值)

   • 增加 y 的值，比如從 100 增加到 400，可以讓前景圖片在滾動過程中移動得更加顯著。

   y: 400 // 更大的 y 值創造更明顯的移動效果

2. 調整 ScrollTrigger 的範圍

   • 調整 scrub 值來控制滾動的同步平滑程度，或改變 start 和 end 的設置來讓動畫持續更長時間。

   scrub: 1 // 增加 scrub 的值可以讓滾動效果更平滑和顯著

3. 增加背景和前景的對比

   • 調整背景的移動量，讓它移動得更慢，而前景圖片移動得更快，從而產生更明顯的對比。

4. 結合其他效果 (如 scale 或 rotation)

   • 除了移動，你還可以結合 scale 或 rotation 來讓前景圖片更加突出，例如：

gsap.to(".foreground img", {
  y: 400,
  scale: 1.2, // 輕微放大來增強視覺效果
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax",
    start: "top top",
    end: "bottom top",
    scrub: true,
  },
});

使用 GSAP 和 ScrollTrigger，你可以輕鬆創建具有前景和背景層次感的視差滾動效果。通過調整移動量、動畫範圍和增加額外效果，你可以顯著增強視覺效果，使你的網頁更具吸引力。