結合動態背景與滾動效果，打造前所未有的海洋深處互動體驗

在這個數位時代，誰說網頁設計只能是靜態的？
想像一下你的頁面不再只是一片白板，而是變成了一個充滿生命力的海洋世界——魚兒在你滾動頁面時悠游自在，背景中的泡泡隨波漂浮，像是帶你潛入深海冒險。

這次，我們將一起探索如何利用 Vue.js 和 GSAP，輕鬆打造這樣的互動式動態背景，讓你的網站瞬間變得更加生動有趣！
準備好潛入這片專屬的海洋世界了嗎？
Let's dive in！

用 Vue.js 與 GSAP 打造海洋世界動畫

在前面的章節中，Day10 Vue.js 動效分類實戰 (2) 背景動態特輯 - 打造療癒泡泡感 我們成功做出了動態泡泡元件。
這次我們將會學到如何使用它作為背景元件，讓網站可以變得更加生動且具吸引力。

今天，我們將使用 Vue.js 和 GSAP，來構建一個海洋主題的動態背景與互動魚兒動畫。
在這個過程中，你將學到如何實現背景動效的元件化設計，以及如何利用 GSAP 的強大功能來打造流暢的滾動觸發效果。

• template 程式碼結構

<template>
  <div class="h-screen w-full relative">
    <div class="fixed inset-0 z-[-1]">
      <WaterBackground />
    </div>

    <div
      ref="section1"
      class="h-screen flex justify-center items-center text-2xl text-white overflow-hidden w-full"
    >
      <div
        ref="fish1"
        class="absolute w-[200px] h-[200px] top-[-40%] left-[-40%] bg-cover bg-center bg-[url('https://i.imgur.com/WNPQcnc.png')]"
      ></div>
    </div>

    <div
      ref="section2"
      class="h-screen flex justify-center items-center text-2xl text-white overflow-hidden w-full"
    >
      <div
        ref="fish2"
        class="absolute w-[200px] h-[200px] top-[-40%] left-[-40%] bg-cover bg-center bg-[url('https://i.imgur.com/WNPQcnc.png')]"
      ></div>
    </div>
  </div>
</template>

   <div class="fixed inset-0 z--1]">
      <WaterBackground />
    </div>

• 泡泡背景元件解釋
  • WaterBackground.vue 元件，模擬海洋中的泡泡漂浮效果，這將作為頁面的背景動效。
  • 利用 UnoCSS 的fixed class ，來讓背景固定。
  • 並且設置z--1，確定這個背景層級不會影響到我們目前的元件。

設定滾動觸發效果，讓魚兒隨頁面舞動

現在我們已經有了海洋中的背景動畫，接下來就是讓這些可愛的魚隨著滾動浮動起來。
這裡，我們將運用 GSAP 和 ScrollTrigger，實現魚兒在我們滾動頁面時，自由自在地滑行，並根據滾動的方向旋轉身體，展現生動的游泳動作。

首先，讓我們來看看如何設置滾動觸發器，並用 GSAP 來控制魚兒的動作。

魚兒動效解析

在這一部分，我們將深入解析魚兒的動效設計，包括它們如何根據頁面滾動的進度滑動，以及如何實現「翻身」效果，讓魚兒在向上或向下游動時能自然地轉身，模擬出逼真的游泳行為。

讓我們逐步拆解每一段程式碼，詳細了解每個步驟的邏輯與設計。

1. 初始化與元件引用

首先，我們透過 ref 來捕捉要操作的 DOM 元素，並使用 onMounted 來確保當元件掛載完成後再初始化動畫設定。

import { ref, onMounted } from "vue";
import { gsap } from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger); // 註冊 GSAP 的 ScrollTrigger 插件

// 捕捉 DOM 元素
const section1 = ref<HTMLElement | null>(null);
const section2 = ref<HTMLElement | null>(null);
const fish1 = ref<HTMLElement | null>(null);
const fish2 = ref<HTMLElement | null>(null);

• section1 和 section2 代表兩個滾動觸發區域，而 fish1 和 fish2 則是魚兒所在的位置。
• onMounted：確保只有當元件完全掛載後，才進行動畫設置，這是 Vue.js 生命週期的一部分，避免因為未掛載的元素導致找不到 DOM 的錯誤。

2. 設置 GSAP 動畫

接下來，我們透過 gsap.set 來設定魚兒的初始位置，並透過 gsap.to 來定義魚兒的移動動畫，隨著頁面的滾動，魚兒會從螢幕中部向右下角滑動。

onMounted(() => {
  const sections = [section1.value, section2.value];
  const boxes = [fish1.value, fish2.value];

  sections.forEach((section, index) => {
    const box = boxes[index]; // 取得對應的魚兒元素
    let hasFlipped = false; // 用來追蹤魚是否已經翻身

    // 設定魚兒的初始位置
    gsap.set(box, {
      x: "50vw",  // 水平置中
      y: "70vh",  // 垂直位置為螢幕的 70% 高度
    });

    // 設定滾動觸發器
    if (section && box) {
      gsap.to(box, {
        x: "100vw", // 魚兒將沿著 x 軸滑動到螢幕右側
        y: "1500px", // 魚兒沿著 y 軸滑動到底部
        scrollTrigger: {
          trigger: section,  // 設定滾動觸發區域
          start: "top center", // 滾動區域的起始位置
          scrub: true,  // 讓動畫根據滾動的進度同步進行
          onUpdate: (self: ScrollTrigger) => {
            const nearEnd = self.progress >= 0.98;  // 檢查是否接近滾動區域的結尾

            // 當滾動方向向上，並且尚未翻身，魚兒應該翻轉
            if (self.direction === -1 && self.progress < self.start && !hasFlipped) {
              gsap.to(box, { rotationY: "+=180", duration: 0.5 });  // 魚兒翻轉 180 度
              hasFlipped = true;  // 設置翻身狀態
            } 
            // 當滾動方向向下，並且魚兒已經翻身，則恢復方向
            else if (self.direction === 1 && hasFlipped && !nearEnd) {
              gsap.to(box, { rotationY: "-=180", duration: 0.5 });  // 魚兒再次翻轉 180 度
              hasFlipped = false;  // 重置翻身狀態
            }

            // 如果滾動到底部，並且魚兒尚未翻身，則強制讓魚兒翻轉
            if (nearEnd && !hasFlipped) {
              gsap.to(box, { rotationY: "+=180", duration: 0.5 });
              hasFlipped = true;
            }
          },
        },
      });
    }
  });
});

3. 魚群移動與翻身設計

• 初始位置設定 (gsap.set)：我們將魚兒的初始位置設置在螢幕的中間，並且稍微靠下，讓魚兒有足夠的空間在滾動中移動。

• 滾動觸發 (scrollTrigger)：我們透過 ScrollTrigger 來實現滾動觸發。

• 當頁面滾動時，魚兒會根據滾動進度沿著 x 軸滑動到螢幕右側，同時沿 y 軸向下移動。

• 魚群翻身 (rotationY)：

  • 當頁面向上滾動，魚兒會翻轉 180 度，模擬向上游動時的翻身效果。
  • 當頁面再次向下滾動，魚兒會再度翻身回到原來的方向，這透過 rotationY 進行設定，持續保持魚兒游動的真實感。

• 進一步翻轉控制：當滾動到底部，魚兒尚未翻身時，會強制讓魚兒翻轉，保持魚群的動態效果與視覺一致性。

4. 魚兒的行為邏輯

• self.direction：用來檢查滾動的方向，當 direction 為 -1 時代表向上滾動，1 則是向下滾動，這能精準控制魚兒的翻身時機。

• self.progress：代表滾動的進度，我們透過檢查進度來決定魚群何時應該進行翻轉或恢復方向，確保動畫與滾動體驗保持同步。

這段程式碼讓我們見證了 GSAP 和 ScrollTrigger 的強大之處，不僅可以精確控制魚群的動畫移動，還能細膩地處理滾動時的翻轉效果。
這些小細節讓整個頁面變得更加生動有趣，宛如一個活靈活現的海洋世界。
隨著魚兒在滾動中游動翻身，整個互動體驗變得更加沉浸且充滿趣味。

在這個範例中，我們學會了：

• 如何使用 gsap.to 和 ScrollTrigger 控制元素隨滾動移動。
• 如何用 rotationY 來實現魚兒的自然翻身動畫。
• 如何根據滾動方向和進度來精準觸發動畫，提升互動體驗。

現在，你可以進一步發揮創意，加入更多可愛的魚兒或其他海洋元素，將這個海洋世界變得更豐富、更有趣！

(只有兩隻魚似乎太孤單了？）

結語：潛入你的專屬海洋世界

到這裡，我們一起完成了一個充滿動感與趣味的海洋世界，不僅有動態泡泡背景，還有隨著滾動舞動的魚群。
這樣的設計，讓靜態的網頁變得生動起來，帶來了豐富的互動體驗。

隨著技術的進步，網頁設計的邊界無限擴展。
我們可以利用像 Vue.js 和 GSAP 這樣的工具，讓網站充滿生命力和創意。

現在，輪到你了！是時候讓你的網頁設計充滿更多驚喜與互動，讓訪客徹底沉浸於這片屬於你的「海洋世界」中！🌊🐠