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

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

「自分のサイトでも導入したいけど難しそう…」と思う方も多いかもしれません。

でも、IntersectionObserver（インターセクション・オブザーバー）を使えば、複雑な処理を書かなくてもスクロール連動アニメーションが作れます。

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

※無料部分では仕組みと簡単なサンプルを紹介します。

実際の導入コードやテンプレートは有料パートで解説しています。

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

IntersectionObserverとは？

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

これを使うと、

• 画面に見えたタイミングでアニメーション発火
• 従来のscrollイベントより軽量で高速
• スクロール時のアニメーションや遅延読み込みに最適

従来の方法では、スクロールごとに処理を実行するため重くなりがちですが、IntersectionObserverなら必要なときだけ反応するのでパフォーマンスも良好です。

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

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

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

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) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // ここで .active を付与してアニメーションを発火
        // 実際の実装は有料パートで解説
      }
    });
  });

  targets.forEach(target => observer.observe(target));
});

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

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

---

無料部分では「アニメーションの仕組み」と「動きのイメージ」を確認しました。

もし自サイトですぐに動くスクロールアニメーションを導入したい場合は、有料パートで 5種類のアニメーションテンプレート＋IntersectionObserverでのスクロール監視コードをセットで提供しています。

一度導入すれば、簡単に動きのあるサイトを作れます。