スクロールに合わせて背景が拡大するアニメーションをGSAPで簡単に作る方法

CSS、JavaScript

ウェブサイトにインタラクティブな要素を追加したいと思っているあなたへ、今回はGSAP（GreenSock Animation Platform）を使用して、スクロールに応じたアニメーションを実装する方法をご紹介します。この方法を使えば、視覚的に魅力的なページを作成することができます。

GSAPとは？

GSAP（GreenSock Animation Platform）は、JavaScriptを使った強力で柔軟なアニメーションライブラリです。ウェブサイトやアプリにスムーズで複雑なアニメーションを簡単に追加できるのが特徴です。初心者でも直感的に使えるシンプルなAPIを持ちながら、プロフェッショナルにも対応できる高度な機能を備えています。

例えば、要素の移動、回転、フェード、拡大・縮小、スクロールに連動したアニメーションなどを自由に作成できます。また、軽量でパフォーマンスに優れているため、どんなプロジェクトにも適しています。

https://gsap.com/docs/v3

準備するもの

GSAPとScrollTriggerプラグインをプロジェクトに追加します。CDNを使用する場合、以下のスクリプトをHTMLの<head>内に追加してください。

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

完成イメージ

See the Pen Scroll Background Animation by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

HTML

HTMLファイルでは、ページの構造やコンテンツを定義します。このファイルには、CSSやJavaScriptファイルを読み込むリンクも追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>セクションアニメーション</title>
    <link rel="stylesheet" href="styles.css"> <!-- CSSファイルのリンク -->
</head>
<body>

<!-- セクション1 -->
<section id="section1"></section>

<!-- セクション2 -->
<section id="section2">
    <h2>セクション2のコンテンツ</h2>
    <p>ここに追加のコンテンツを入れることができます。</p>
</section>

<!-- GSAPとScrollTriggerの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script src="script.js"></script> <!-- JavaScriptファイルのリンク -->
</body>
</html>

ここで注目すべきポイントは、<link rel="stylesheet" href="styles.css">と<script src="script.js"></script>で、それぞれCSSとJavaScriptファイルを読み込んでいる点です。このように、ファイルを分割することでコードが整理され、読みやすくなります。

ポイント

  • styles.css や script.js のように、CSSやJavaScriptを別ファイルにすることで、HTMLファイルがスッキリし、どの部分が何を担当しているかを理解しやすくなります。
  • 複数のページで同じCSSやJavaScriptを使いたいときも、リンクを貼るだけで使い回しができ、効率的です。

CSS

CSSファイルではページの見た目をスタイリングします。今回はセクションのサイズや背景、テキストのブラー効果などを設定します。

* {
    margin: 0; /* すべての要素のマージンを0に設定 */
    padding: 0; /* すべての要素のパディングを0に設定 */
    box-sizing: border-box; /* ボックスモデルの計算を容易にする */
}

body {
    font-family: Arial, sans-serif;
}

#section1 {
    height: 100vh;
    background-image: url('https://as1.ftcdn.net/v2/jpg/05/31/36/28/1000_F_531362868_ZaoZKXA26hdV45Swdnw38rvcA7aHSuwO.jpg'); /* 指定された背景画像 */
    background-size: 50%; /* 初期状態の背景サイズ */
    background-position: center; /* 中央に配置 */
    background-repeat: no-repeat; /* 繰り返しを無効にする */
    position: relative; /* アニメーションに必要な相対位置 */
    transition: background-size 0.5s ease; /* 背景サイズのトランジション */
}

#section2 {
    height: 100vh;
    background-color: #f0f0f0; /* セクション2の背景色 */
    position: relative; /* アニメーションに必要な相対位置 */
    opacity: 0; /* 初期状態は透明 */
}

#section2 h2 {
    filter: blur(10px); /* 初期状態でブラーをかける */
    transition: filter 0.3s; /* ブラーのトランジション */
    text-align: center; /* 中央揃え */
    padding-top: 50px; /* 上部に余白を追加 */
}

背景画像のサイズや位置、透明度（opacity）、見出しにブラー効果を適用するためのスタイルを定義しています。

ポイント

  • #section1や#section2のように、ID（#）を使って特定のセクションのデザインをカスタマイズします。
  • background-size は、画像が拡大するように設定していますが、スクロール時に変化するため、後でJavaScriptで制御します。
  • opacity や filter（ブラー）は、後でJavaScriptによって変化しますが、ここで初期状態を設定しておくことで、アニメーションがスムーズに動作します。

JavaScript

JavaScriptファイルでは、アニメーションの動作を定義します。今回はGSAP（GreenSock Animation Platform）とそのプラグインであるScrollTriggerを使用して、スクロールに応じたアニメーションを作成します。

gsap.registerPlugin(ScrollTrigger);

// セクション1のアニメーション
const tl = gsap.timeline({
    scrollTrigger: {
        trigger: "#section1",
        start: "top top",
        end: "+=500",  // アニメーション全体の長さを500pxに設定
        scrub: 1,  // スクロールに応じてアニメーションを同期
        pin: true,  // セクション1を固定
    }
});

// 背景画像を拡大
tl.to("#section1", { backgroundSize: "100%", ease: "none" });

// セクション2のフェードイン
tl.to("#section2", { opacity: 1, ease: "power1.inOut" }, "700px"); // スクロール700pxでセクション2をフェードイン

// セクション2の見出しアニメーション
gsap.to("#section2 h2", {
    scrollTrigger: {
        trigger: "#section2",
        start: "top 70%",  // セクション2のトップが画面の70%に達したときに発動
        toggleActions: "play none none reverse", // スクロールに応じてアニメーションを再生
    },
    filter: "blur(0px)",  // ブラーを解除
    duration: 0.3         // アニメーションの持続時間
});

このコードでは、まずGSAPとScrollTriggerを登録し、スクロールに応じて背景画像の拡大とセクション2のフェードイン、見出しのブラー解除を設定しています。

ポイント

  • gsap.timeline: 複数のアニメーションを連続して実行するためにタイムラインを作成しています。これにより、1つのアニメーションが終わった後に次のアニメーションが開始されるように設定できます。
  • scrub: スクロールに応じてアニメーションが同期する設定。ページのスクロール速度や位置に応じてアニメーションが動くので、ユーザーがよりインタラクティブに感じます。
  • **ScrollTrigger**は、特定の要素が画面に表示されたときにアニメーションを発動させるためのプラグインです。今回はセクション1のスクロールに応じてセクション2をフェードインさせています。
サンプルはこちら

まとめ

今回のコードでは、スクロールに合わせて背景が拡大する動きを作りました。

ポイントは、GSAPというアニメーションライブラリを使うと、難しい動きも簡単に作れることです。今回は、スクロールに合わせてアニメーションが動くようにしています。

このように、HTML・CSS・JavaScriptを組み合わせることで、簡単に動きのあるページを作ることができます。少しずつカスタマイズして、自分だけの動きを作ってみましょう！

タイトルとURLをコピーしました