スクロールアニメーションでふわっと表示（動きをつける）｜CSS＋IntersectionObserverで簡単実装【コピペOK】

Webサイトでよく見かける、スクロールに合わせて「ふわっ」と表示されるアニメーション。あの動きが入るだけで、サイトが少しおしゃれに見えたりコンテンツが読みやすく感じたりしますよね。

ただ、

• 「JavaScriptって難しそう…」
• 「コード量が多そう…」
• 「プラグインなしでできるの？」

と感じる方も多いと思います。

でも実は、CSS と IntersectionObserver を組み合わせれば、比較的シンプルなコードだけで自然なスクロールアニメーションを実装できます。

この記事では、

を、初心者の方でも流れが追いやすいように、できるだけやさしく整理しました。

実際に当サイトのトップページでも使っている方法なので、

• サイトに自然な動きを入れたい
• 少しだけデザイン性を上げたい
• プラグインを増やしたくない

という方にもおすすめです。

まずは「どういう仕組みで動いているのか」をざっくり理解してみてください。後半では実際にそのまま使えるテンプレートコードをまとめています。

IntersectionObserverとは？

IntersectionObserver は、「要素が画面に入ったタイミングを検知してくれる機能」です。

たとえば、

• 画像が見えたらふわっと表示する
• 見出しが表示されたらスライド表示する
• 画面に入ったタイミングでアニメーション開始する

といった処理を作れます。

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

流れとしてはとてもシンプルで、「要素が見えたらactiveクラスを付け、アニメーションが動く」だけです。

IntersectionObserverを使うメリット

scrollイベントでも似たことはできますが、スクロールのたびに何度も処理が走るため要素数が増えると重くなりやすいです。

その点、IntersectionObserverは「要素が画面に入った瞬間」だけを検知できるので必要なタイミングだけ処理できます。

特に、

• フェードイン
• スライド表示
• 画像の遅延表示（lazy load）

などとは相性が良いです。

※今後Scroll-Timeline（CSSでスクロール連動アニメーション）が主流になる可能性がありますが、現時点では対応ブラウザが限られるため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));
});

今回のポイントは、

• アニメーション自体はCSSで作る
• JavaScriptは“いつ動かすか”だけ担当する

という役割分担です。

そのため、JavaScriptが難しく感じる方でも比較的理解しやすく、あとからアニメーションだけ変更するのも簡単です。

スクロールアニメーションでよく使う動きサンプル｜fade-inなどデモページでチェック

スクロールアニメーションは表示の仕方によっていくつかの種類があります。ここでは代表的なアニメーションを一部紹介します。

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

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

左からスライドイン

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

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

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

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

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

他の動きはデモページで確認できます

実際のサイトで使うイメージに近い形で動きを確認できるので、「どんな雰囲気になるか」をイメージしやすいと思います。

スクロールアニメーションの実装方法｜IntersectionObserverでふわっと表示

スクロールアニメーションは、次の3ステップで動きます。

CSSとJavaScriptは最初に一度設定し、あとは動かしたい要素にクラスを追加するだけで使えます。

編集方法については以下の記事にまとめています。Cocoonでの設定例を中心に紹介していますが、WordPressテーマなら基本的な仕組みはほぼ同じです。

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-scale-up

のように使います。

WordPressで設定する方法（簡単）

HTMLを書かなくても使えます。

ブロックエディタの「追加CSSクラス」に、クラス名を入力するだけ。

これで、スクロール時にアニメーションが動きます。

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

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

CSSで動きを作る

次に、CSSでアニメーションを設定します。

最初は非表示にしておき、active クラスが付いたら表示する仕組みです。

transition を使うことで、なめらかに変化します。

---

ここまでで、スクロールアニメーションの基本的な仕組みを紹介しました。

ただ、実際にやってみると、

• 動くけどタイミングが不自然
• 表示タイミングの調整が難しい
• コードを少し変えたら動かなくなった

というところで止まりやすい部分でもあります。

特にoptions設定（「いつ」アニメーションを動かすか）は少し数値を変えるだけでも見え方が大きく変わります。

そこで有料パートでは、実際にそのまま使いやすい形に整理したコードをまとめています。

カスタマイズ全体の流れ

1. 登録：codocコードクへ会員登録（初回のみお願いします）
2. 入力：有料エリアの内容をご自身で入力してください
3. 確認：プレビューで表示確認して完了です

販売者情報は 「特定商取引法に基づく表記」をご確認ください。