スクロール連動アニメーションの作り方｜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が付くとフェードイン */
}

JavaScript（基本）

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

  // 要素が表示領域に入ったらクラスを付与する処理
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // アニメーション発火
        // ※ここに.active付与などの処理を追加
                ↓

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

• IntersectionObserver() ：「監視の仕組み」
• entry.isIntersecting ：「見えたかどうか」を判定しています

動きをチェック｜スクロールアニメーションの実例サンプル

スクロールアニメーションは表示の仕方によっていくつかの種類があります。ここでは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>

ワードプレスのブロックエディタを使う場合

各ブロックの「高度な設定」→「追加CSSクラス」に上記のクラス名を入力すると簡単に適用できます。

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

---

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

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