WordPressでスクロールでふわっと表示する方法｜CSS＋IntersectionObserver実装（プラグインなし）

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

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

でも、CSSとIntersectionObserver（インターセクション・オブザーバー）を使えば、複雑なプログラムを書かなくてもスクロール連動アニメーションを実装できます。プラグインも必要ありません。

この記事では、

• スクロールアニメーションの仕組み
• 基本的なサンプルコード
• 実装までの流れ

を、できるだけシンプルに解説します。

HTMLとCSSの基礎（クラスの付け方）が分かれば、コピペで再現できる内容です。

まずは無料パートで「仕組み」を理解してみてください。実際に使えるテンプレートは、有料パートでまとめています。

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

IntersectionObserverとは？

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

これを使うと、要素が表示されたタイミングでクラスを付与し、CSSアニメーションを発火させる処理をシンプルに実装できます。

基本の流れは次の3つだけです。

この一連の処理をJavaScriptで自動化しています。

IntersectionObserverを使うメリット

• 画面に見えたタイミングで自然にアニメーション発火できる
• scrollイベントより軽量で高速
• アニメーションや遅延読み込み（lazy load）との相性も良い

従来のscrollイベントはスクロールするたびに処理が実行されるため、要素が多いページでは処理が増えカクつきの原因になることもあります。

一方、IntersectionObserverは要素が画面と交差した瞬間だけ通知される仕組みです。必要なタイミングだけ処理が走るため、パフォーマンス面でも優れています。

なお、最近ではCSSの新機能である Scroll-Timeline を使ったスクロール連動アニメーションも登場しています。ただし、ブラウザ対応状況を考えると、現時点では 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) {
        // 実装ではここに処理を記述します
        
      }
    });
  });

  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コードをセットで提供しています。

コピペして、動かしたい要素にクラスを付けるだけで、すぐ実装できます。

以下は有料コンテンツのご案内および特定商取引法に基づく表記です。