スクロールアニメーションの作り方｜CSSとIntersectionObserver（交差監視）でふわっと表示

Webサイトでよく見かける、スクロールに合わせてふわっと要素が表示されるフェードインやスライドアニメーション。

「自分のサイトでも導入したいけど難しそう…」といったイメージがあるかもしれません。

実は、IntersectionObserver（インターセクション・オブザーバー）というJavaScriptの仕組みを使えば、それほど難しい処理を書かずにスクロール連動アニメーションを実装できます。

この記事では、スクロールアニメーションの仕組み・サンプルコード・具体的な実装方法まで丁寧に解説します。

この記事の一部（そのままコピペで使える完成版のHTML／CSS／JSコピペテンプレート等）は有料公開です。すぐに導入したい方は以下の実装方法をご覧ください。

IntersectionObserverでスクロールアニメーションを作る仕組み

IntersectionObserverとは？

IntersectionObserver（インターセクション・オブザーバー）は、ページ内の要素が画面内に入ったかどうかを監視できるJavaScriptの機能です。

例えば、下にスクロールして画像やテキストが見えるタイミングでふわっと表示させることができます。

特徴

• 要素が画面内に入ったかどうかを自動で監視できる
• 従来のscrollイベントより軽量で高速
• スクロール時のアニメーションや遅延読み込みに最適

スクロール監視のイメージ

ユーザーがスクロールすると、画面に要素が見えるタイミングでアニメーションが発火します。

サンプルコード（簡単な例）

HTML（イメージ）

<div class="fade-in">フェードインする要素</div>

CSS（フェードの例）

.fade-in {
  opacity: 0; /* 初期は非表示 */
  transition: opacity 1s ease-in-out;
}
.fade-in.active {
  opacity: 1; /* activeが付くとフェードイン */
}

仕組みのコード例（擬似版）

// ページ読み込み後に実行
document.addEventListener("DOMContentLoaded", () => {
  const targets = document.querySelectorAll(".fade-in");

  // 要素が表示領域に入ったらクラスを付与する仕組み
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // ここで .active を付与してアニメーションを発火させる
        // ※ 実際の処理は有料パートで解説します
      }
    });
  });

  // 各要素を監視
  targets.forEach(target => observer.observe(target));
});

上のコードは、ページ読み込みが完了したあとに.fade-in クラスを持つ要素をすべて取得し、スクロールで画面内に入ったタイミングを監視しています。

スクロールアニメーションの実例サンプル

スクロールアニメーションは表示の仕方によっていくつかの種類があります。ここではWebサイトでよく使われる代表的なアニメーションを5パターン紹介します。

• サンプル用にボタンクリックで再生
• 実際のページではスクロールに合わせてアニメーション発火

ここで使っているアニメーションの仕組みと記述方法はこちらの記事で解説しています。

フェードイン（ふわっと表示）

• 特徴：要素が徐々に表示されるシンプルなアニメーション
• 用途：テキストや画像の登場に自然さを加えたいとき

See the Pen スクロールアニメーション｜フェードイン（fade-in） by Turicco (@Turicco) on CodePen.

下からフェードイン

• 特徴：下から上にスライドしながらふわっと表示される
• 用途：段落やリスト項目など順序を意識して見せたいとき

See the Pen スクロールアニメーション｜下からフェードイン（fade-up） by Turicco (@Turicco) on CodePen.

右からスライドイン

• 特徴：画面右側から横にスライドして表示
• 用途：画像やカード型コンテンツに動きをつけたいとき

See the Pen スクロールアニメーション｜右からスライドイン（slide-right） by Turicco (@Turicco) on CodePen.

左からスライドイン

• 特徴：右からスライドインの逆、左側から表示
• 用途：左寄せレイアウトのコンテンツを自然に出現させたいとき

See the Pen スクロールアニメーション｜左からスライドイン（slide-left） by Turicco (@Turicco) on CodePen.

拡大して表示（ズームイン）

• 特徴：小さい状態から徐々に拡大しながら表示
• 用途：見出しやアイキャッチ画像など目立たせたい要素に効果的

See the Pen スクロールアニメーション｜拡大して表示（scale-up） by Turicco (@Turicco) on CodePen.

スクロールアニメーションの具体的な実装方法｜IntersectionObserver

HTMLにアニメーション用クラスを付ける

アニメーションさせたい要素に対応するクラスを付けます。

これで 「どんな動きをさせたいか」 を指定します。

<div class="scroll-fade-in">フェードイン</div>

<div class="scroll-fade-up">下からフェードイン</div>

<div class="scroll-slide-right">右からスライドイン</div>

<div class="scroll-slide-left">左からスライドイン</div>

<div class="scroll-scale-up">拡大して表示</div>

上記のようにクラス名を変えるだけで、動きの種類を切り替えられます。
（例）scroll-fade-up → 下からふわっと出現、scroll-slide-left → 左からスライドイン

WordPressブロックエディタで設定する場合

HTMLを直接書かなくてもOK。
ブロックごとに 追加CSSクラス を設定すれば簡単に使えます。

詳しい方法は → 追加CSSクラスの使い方

ブロックエディタで特定のブロックにだけデザインを当てる方法を紹介しています。

CSSでアニメーションを定義

• active クラスが付くとアニメーションが発動します。
• 好みでスピードや移動距離も調整可能です。
• transition プロパティを使って、滑らかな変化を表現しています。

例：

.fade-in {
  opacity: 0; /* 初期は非表示 */
  transition: opacity 1s ease-in-out;
}
.fade-in.active {
  opacity: 1; /* activeが付くとフェードイン */
}

---

ここから先は 有料コンテンツ になります。

無料部分で紹介したアニメーションは「イメージ用」でしたが、実際にサイトへ導入するには スクロールを監視して、表示タイミングでクラスを付与する仕組みが必要です。