スクロール連動でヒーローセクションが縮小するアニメーションをGSAPで作る

CSS、JavaScript
4,731 文字 約 12 分で読めます

Webページでよく見る「スクロールに合わせてメインビジュアルが縮小し、次のコンテンツが現れる」アニメーション。
ヒーローセクションと呼ばれるメインビジュアル部分をスクロール連動で動かすだけで実現できます。本記事では、初心者向けにGSAPを使った簡単な実装例と、カスタマイズ方法も紹介します。

See the Pen 1104-01 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

ヒーローセクションとは？

ヒーローセクションはページの最初に大きく表示されるメインビジュアル部分です。
通常は固定で表示され、視線を集める役割があります。
今回はこのヒーローセクションをスクロールに合わせて縮小し、次のコンテンツに自然に誘導するアニメーションを作ります。

GSAPを使ったスクロール連動アニメーション

JavaScriptライブラリ「GSAP」を使うと、アニメーションを簡単に滑らかに作成できます。
今回はスクロール量に応じてヒーローセクションの縮小とフェードアウトを行い、次のコンテンツをフェードインさせます。

GSAPとは？初心者でも簡単に使えるウェブアニメーションの基本
GSAPを使って、初心者でも簡単にウェブアニメーションを実装できます。左右に動かしたり、フェードイン、回転させたりするアニメーションを紹介しています。
kmnmc.com
2024.10.11

HTML構造

<main>
  <div class="hero-wrap"></div>
  <div class="hero">
    <div class="visual"></div>
  </div>

  <section class="next">
    <div class="container">
      <h1>次のコンテンツタイトル</h1>
      <p>ヒーローが縮小したら現れます。</p>
      <div class="card">ポイント1</div>
      <div class="card">ポイント2</div>
      <div class="card">ポイント3</div>

      <h2>その下の通常コンテンツ</h2>
      <p>以降は通常のページコンテンツです。</p>
      <div class="card">記事ブロックの例</div>
      <div class="card">記事ブロックの例</div>
      <div class="card">記事ブロックの例</div>
    </div>
  </section>
</main>

CSS

.hero-wrap { height: 100vh; width: 100vw; }

.hero {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  will-change: transform, opacity; /* アニメーション性能向上のヒント */
  pointer-events: none;            /* ヒーロー上でのクリックを無効化 */
  backface-visibility: hidden;
  transform-origin: center center; /* 縮小や回転の基準点 */
}

.hero .visual {
  width: 100vw;
  height: 100vh;
  background: url('https://images.unsplash.com/photo-1503264116251-35a269479413?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3&s=example') center/cover no-repeat;
  box-shadow: 0 28px 60px rgba(0,0,0,0.25);
  will-change: transform, opacity;
}

.next {
  opacity: 0;
  transform: translateY(40px);
  visibility: hidden;
  transition: opacity 560ms ease, transform 560ms ease;
  background: #fff;
}

.next.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible; /* クラス切替でフェードイン */
}

.container { max-width:1100px; margin:0 auto; padding:100px 20px; }
h1{font-size:28px; margin:0 0 12px;}
h2{font-size:24px; margin:60px 0 12px;}
p.lead{color:#555; margin:0 0 28px;}
.card{background:#fff; padding:20px; border-radius:10px; box-shadow:0 6px 18px rgba(15,20,30,0.06); margin-bottom:16px;}

@media (prefers-reduced-motion: reduce) {
  .hero, .next { transition: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
}

@media (max-width: 600px) {
  .hero .visual { height: 100vh; border-radius:6px; }
}

JS（GSAP使用）

const hero = document.querySelector('.hero');
const visual = document.querySelector('.visual');
const next = document.querySelector('.next');
const heroWrap = document.querySelector('.hero-wrap');

let vh = window.innerHeight;
heroWrap.style.height = vh+'px';

gsap.registerPlugin(ScrollTrigger);

gsap.to(hero, {
  scale:0.3,
  opacity:0,
  ease:'power1.out',
  scrollTrigger: {
    trigger: heroWrap,
    start:"top top",
    end:"bottom top",
    scrub:true,
    onUpdate: self => {
      if(self.progress>0.5) next.classList.add('visible');
    }
  }
});

GSAPアニメーションのカスタム方法

拡大率を変更する場合

gsap.to(hero, {
  scale:0.5, // 縮小率を変更
  opacity:0,
  ease:'power1.out',
  scrollTrigger: { ... }
});

scale の値を変えるだけで縮小の度合いを自由に調整可能です。

次のコンテンツを表示するタイミングを変更する場合

onUpdate: self => {
  if(self.progress > 0.3) next.classList.add('visible'); // 50% → 30% に変更
}

self.progress は 0〜1 の範囲でスクロール進行度を表します。

アニメーションを一度だけ実行したい場合

scrollTrigger: {
  trigger: heroWrap,
  start: "top top",
  end: "bottom top",
  scrub: true,
  once: true
}

once: true を追加するだけで、スクロール戻りでも再アニメしません。

まとめ

スクロールに連動したヒーローセクションの縮小アニメーションは、GSAPを使えば比較的簡単に実装できます。

  • 背景画像は background-size: cover を使うことで比率を崩さずフルスクリーン表示可能。
  • 縮小率（scale）や次のコンテンツが現れるタイミング、アニメーションの繰り返し・一度きりの設定なども、JS内の少しの変更でカスタマイズ可能。

GSAPを動かすには、以下のCDNをHTMLに読み込む必要があります。

<!-- GSAP CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js"></script>

初心者でも手軽に試せるので、まずはこのサンプルを動かしてアニメーションの感覚を掴んでみましょう。
カスタムも比較的簡単に行えるので、自分のサイトに合わせて自由に調整できます。

サンプルはこちら
タイトルとURLをコピーしました