コピペで実装できる！スクロールアニメーションの実装方法

2025年1月10日

はじめに

Webサイトを制作していると「スクロールに合わせて要素をフェードインさせたい」「スクロールするとスムーズに表示させたい」というニーズがよくありますよね。

でも、実装方法がわからない、どんなライブラリを使えばいいのかわからないという方も多いのではないでしょうか。

この記事では、JavaScriptのIntersection Observerを使って、スクロールアニメーションを実装する方法を解説します。

ライブラリを使わずに実装できるので、サイトの読み込み速度を気にする方にもおすすめです。

詳しく解説していますので、コードだけほしい方は最後の「完成コード」までスクロールしてください。

見本

今回は下記のようなスクロールアニメーションを作っていきます。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

ポイントは下記になります：

スクロールに応じて要素が下から上にフェードインする
アニメーションはCSS Transitionを使用して滑らかな動きを実現
一度表示された要素は再度非表示にならない
モバイルデバイスでも快適に動作する軽量な実装

スクロールアニメーションの見た目の制作

HTML

<div class="container">
  <section class="fade-in">
    <h2>セクション 1</h2>
    <p>下にスクロールしてください</p>
  </section>

  <section class="fade-in">
    <h2>セクション 2</h2>
    <p>各セクションは順番にアニメーションします。</p>
  </section>

  <section class="fade-in">
    <h2>セクション 3</h2>
    <p>シンプルで美しいアニメーションを実現できます。</p>
  </section>
</div>

HTMLの解説は以下の通りです。

containerクラスで全体をラップし、セクション間の余白を制御します
各section要素にfade-inクラスを付与し、アニメーション対象として指定します
シンプルな構造にすることで、様々なコンテンツに応用できます

CSS

.container {
  max-width: 800px;
  margin: 200px auto;
  padding: 20px;
}

.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s, transform 0.8s;
  margin-bottom: 60px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

section h2 {
  margin-bottom: 15px;
  color: #333;
}

section p {
  line-height: 1.6;
  color: #666;
}

CSSの主要なポイントは以下の通りです。

初期状態ではopacity: 0とtranslateY(40px)で要素を非表示かつ下に配置します
transitionプロパティで0.8秒かけてアニメーションするように設定します
activeクラスが付与されると、opacity: 1とtransform: translateY(0)で要素を表示します
アニメーションの動きを自然にするため、適度なmarginとpaddingを設定しています
デザインを整えるため、背景色や文字色、角丸などの装飾的なスタイルを追加しています

スクロールアニメーションの動きの制作

見た目が完成したので、次はIntersection Observerを使って要素が画面内に入ったときにアニメーションする機能を実装していきます。

JavaScriptの完成コード

document.addEventListener('DOMContentLoaded', () => {
  const options = {
    root: null, // ビューポートをルートとして使用
    rootMargin: '-50px', // 少しスクロールしてから発火するように調整
    threshold: 0.1 // 要素が10%見えたときに発火
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('active');
        // 一度表示されたら監視を解除
        observer.unobserve(entry.target);
      }
    });
  }, options);

  // アニメーション対象の要素を監視対象に追加
  const fadeElements = document.querySelectorAll('.fade-in');
  fadeElements.forEach(element => {
    observer.observe(element);
  });
});

主要な部分を解説します。

Intersection Observer の設定

root: nullは、ビューポート（画面全体）を基準とすることを指定
rootMargin: '-50px'で、要素が画面端から50px内側に入ってからアニメーションを開始
threshold: 0.1で、要素の10%が見えた時点でアニメーションを開始

コールバック関数の実装

isIntersectingプロパティで要素が表示領域に入ったかを判定
要素が表示領域に入ったらactiveクラスを追加
unobserve()で、一度表示された要素は監視を解除し、パフォーマンスを最適化

監視対象の登録

querySelectorAll()で.fade-inクラスを持つ要素を全て取得
observe()メソッドで各要素を監視対象として登録

完成コード

以下は完成後のコードです。

HTML

<div class="container">
  <section class="fade-in">
    <h2>セクション 1</h2>
    <p>下にスクロールしてください</p>
  </section>

  <section class="fade-in">
    <h2>セクション 2</h2>
    <p>各セクションは順番にアニメーションします。</p>
  </section>

  <section class="fade-in">
    <h2>セクション 3</h2>
    <p>シンプルで美しいアニメーションを実現できます。</p>
  </section>
</div>

CSS

.container {
  max-width: 800px;
  margin: 200px auto;
  padding: 20px;
}

.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s, transform 0.8s;
  margin-bottom: 60px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

section h2 {
  margin-bottom: 15px;
  color: #333;
}

section p {
  line-height: 1.6;
  color: #666;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const options = {
    root: null,
    rootMargin: '-50px',
    threshold: 0.1
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('active');
        observer.unobserve(entry.target);
      }
    });
  }, options);

  const fadeElements = document.querySelectorAll('.fade-in');
  fadeElements.forEach(element => {
    observer.observe(element);
  });
});