'第 i 天 GSAP：帶有旋轉箭頭的互動式滾動動畫”

介紹

？ 開發者們您好！

歡迎來到我的GSAP 之旅的第 7 天，在這裡我探索網路動畫的無限可能性。今天，我接受了創建互動式基於滾動的選取框動畫的挑戰，該動畫具有動態文字和旋轉箭頭。

借助 GSAP 強大的動畫工具，我們將使頁面響應用戶滾動方向（向上或向下），並實現無縫移動和旋轉。讓我們深入了解一下！

---

我們正在建設什麼？ ️

我們的動畫將包括：

• 文字和圖像的滾動字幕。
• 依照捲動方向調整的響應式動畫。
• 旋轉箭頭增添魅力！

您可以在此處查看現場演示。

---

HTML結構

這是我使用的簡單 HTML 標籤：

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day-7 Scrolling Text Animation</title>
    <link rel="stylesheet" href="style.css">


    <div>




<hr>


<hr>

<h3>
  
  
  JavaScript Animation with GSAP
</h3>

<p>Here’s the GSAP-powered JavaScript code that makes the magic happen:<br>
</p>

<pre class="brush:php;toolbar:false">window.addEventListener("wheel", function (dets) { 
    if (dets.deltaY > 0) {
        // Scrolling Down
        gsap.to(".marque", {
            x: "-200%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 180
        });
    } else {
        // Scrolling Up
        gsap.to(".marque", {
            x: "0%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 0
        });
    }
});

---

它是如何運作的⚙️

1. 事件監聽器：window.addEventListener("wheel") 偵測滾動方向。
2. GSAP 動畫：
   • gsap.to() 將選取框朝特定方向移動。
   • 箭頭的旋轉增添了動態、互動的感覺。
3. 無限滾動：使用重複：-1 確保選框不斷循環。

---

挑戰與經驗教訓

？ 挑戰：將捲動方向與選取框移動同步很棘手。

？ 解決方案：GSAP 強大的 API 可以輕鬆地透過重複、輕鬆和持續時間等屬性來微調動畫。

---

最後的想法

該專案展示了 GSAP 如何處理基於滾動的互動並使網頁栩栩如生。無論您是在製作個人作品集還是創意網站，GSAP 都是讓動畫引人入勝且直觀的完美工具。

？ 親自嘗試並分享您的創作！

---

資源

• GSAP 文件
• 現場演示
• GitHub 上的原始碼

---