導入

? 開発者の皆さん、こんにちは!

私の GSAP Journey の 7 日目 へようこそ。ここでは、ウェブ上のアニメーションの無限の可能性を探求します。今日は、動的なテキストと回転する矢印を特徴とするインタラクティブなスクロールベースのマーキー アニメーションの作成に挑戦しました。

GSAP の強力なアニメーション ツールを使用すると、ユーザーのスクロール方向 (上下) にページがシームレスな動きと回転で応答するようになります。飛び込んでみましょう！

私たちが構築しているもの ⁉️

アニメーションには次のものが含まれます:

• テキストと画像のスクロールマーキー。
• スクロール方向に基づいて調整される応答性の高いアニメーション。
• 矢印を回転させてセンスをプラス！

ここでライブデモをご覧いただけます。

HTMLの構造

私が使用した単純な HTML マークアップは次のとおりです:

    
    
    
    


    











  
  
  JavaScript Animation with GSAP


Here’s the GSAP-powered JavaScript code that makes the magic happen:



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
        });
    }
});








  
  
  仕組み ⚙️




イベント リスナー: window.addEventListener("wheel") はスクロール方向を検出します。


GSAP アニメーション:



gsap.to() は、マーキーを特定の方向に移動します。

矢印の回転により、ダイナミックでインタラクティブな感覚が加わります。




無限スクロール:repeat: -1 を使用すると、マーキーが無限にループし続けることが保証されます。







  
  
  課題と学習


? 課題: スクロール方向とマーキーの動きを同期させるのは困難でした。


? 解決策: GSAP の堅牢な API により、繰り返し、容易さ、継続時間などのプロパティを使用してアニメーションを微調整することが簡単になりました。  





  
  
  最終的な考え


このプロジェクトでは、GSAP がどのように スクロールベースのインタラクション を処理し、Web ページに命を吹き込むことができるかを示しました。個人のポートフォリオを作成している場合でも、クリエイティブな Web サイトを作成している場合でも、GSAP はアニメーションを魅力的かつ直感的に作成するのに最適なツールです。  

? 自分で試して、あなたの作品を共有してください! 





  
  
  リソース




GSAP ドキュメント


ライブデモ


GitHub のソースコード