WordPress│ブロックにふわっとフェードインアニメーションを追加する方法

よくコーポレートサイト等を閲覧する時に、スクロールする度にふわっとフェードインしてコンテンツが表示されるという経験はないでしょうか？

こういったアニメーションの追加するプラグインは様々あるものの…

実はCSSとJSだけで簡単にアニメーションが追加できます。

サンプル

本記事ではWordPressでブロックにふわっとフェードインアニメーションを追加する方法を紹介いたします。

追記

便利なプラグインがあるので、コードが苦手な方は下記を導入されると良いです。

あわせて読みたい

WordPress│Blocks Animationの動きのサンプル57種類 SWELLのブロックに動きを付ける方法の1つが、Blocks Animationです。ブロック設定のサイドバーからCSSアニメーションを選べるため、この方法では自分でJavaScriptを書く…

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

WordPressでブロックにふわっとフェードインアニメーションを追加する方法

WordPressでブロックにふわっとフェードインアニメーションを追加する方法は簡単です。

CSSで動きを指定して、JavaScriptでタイミングを指定するだけです。

CSS

「外観 → カスタマイズ → 追加CSS」または子テーマのstyle.cssへ追加します。

旧版の.fadeinを常時opacity:0にするCSSは取り除きます。

親テーマは編集しません。

@media (prefers-reduced-motion: no-preference) {
  .waza-fadein.is-revealed { animation: waza-reveal 0.7s ease-out both; }
  .waza-fadein:focus-within { animation: none; }
}
@keyframes waza-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

動きの量やタイミングもCSSで指定できます。

JavaScript

スクロール中にCSSを動的に追加するJavaScriptのコードを追加します。

次はPHPを含むコードです。

子テーマのfunctions.phpかCode Snippetsの一方へ追加します。

JavaScript欄へPHP部分を貼らないでください。

※もし記事下にJavaScriptの入力欄があれば<script></script>の中身のコードだけ入力してください。

add_action( 'wp_footer', function () { ?>
<script>
(() => {
  let observer;
  const init = () => {
    const after = window.SWELLHOOK && window.SWELLHOOK.barbaAfter;
    if (after && typeof after.add === 'function') after.add(init);
    if (observer) observer.disconnect();
    if (!('IntersectionObserver' in window) ||
        window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        entry.target.classList.add('is-revealed');
        observer.unobserve(entry.target);
      });
    }, { threshold: 0 });
    document.querySelectorAll('.waza-fadein:not(.is-revealed)').forEach((el) => observer.observe(el));
  };
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
  else init();

})();
</script>
<?php } );

threshold: 0で、対象が画面へ入り始めた時に一度だけアニメーションします。

ブロックにCSSを追加

アニメーションさせたい部分を選択、高度な設定の追加CSSクラスにwaza-fadeinと記載します。

もちろんグループブロック全体をアニメーションさせることもできます。

次の画像は旧版の設定画面で、入力例はfadeinです。

現行コードを使うときは、同じ欄へwaza-fadeinと入力してください。

確認

最後にスクロールして確認しましょう。

本文を表示したまま確認する手順

本文をopacity:0にして待つ旧方式は撤去し、上記のCSSとPHPの1組だけを使用します。

CSSを書き忘れた場合も本文が見える構成にし、SWELLのPjaxでは遷移後の対象ブロックも初期化します。

実WordPress/SWELLで画面内に入った時のis-revealed追加と、内部リンクへキーボードで移動した時のanimation:noneを確認しました。

OSの動きを減らす設定とブラウザー全体のJavaScript無効化は、今回の実ブラウザー確認に含めていません。

導入前に既存のPHP・CSSを保存し、その後で旧コードを置き換えて、スクロールとリンク操作を確認してください。

連続する装飾を操作で止めたい場合は、停止チェック付きの2画像ループを参照できます。

Pjaxで追加されたブロックを初期化する

この公開ページ内の見本は、通常読込時に動く独立したJavaScriptです。

見本用のJavaScriptにはPjax後の再初期化処理を含めていないため、ここでの通常スクロール確認をPjax動作の確認とは扱いません。

Pjaxでの確認結果は、以下に記載した隔離環境で掲載PHPを適用した試験に基づきます。

JavaScriptのコードは、以前のコードを残さず掲載例へ置き換えます。

子テーマのfunctions.phpまたはCode Snippetsの一方だけに登録し、CSSと対象ブロックのwaza-fadeinクラスはそのまま使います。

通常読込のDOMContentLoadedでSWELLの初期化を待ってから、barbaAfterのSetへ同じ初期化関数を登録します。この登録はSWELLHOOKが読み込まれていることが前提です。スクリプトの遅延読み込みでSWELLHOOKが後から用意される設定では、Pjax後の再初期化が働かない場合があります。

遷移のたびに以前のIntersectionObserverを切り離し、新しい本文でまだ表示処理をしていないブロックだけを監視します。

2026年10月3日のWordPress 7.1.2 / SWELL 2.19.0では、対象のないページから実Pjaxで移動しても新しいブロックにis-revealedが付くことを確認しました。

旧コードでは同じ移動後にクラスが付かず、本文は表示されてもフェードが始まりませんでした。

戻す場合はJavaScriptを旧版へ差し戻すか、今回の登録を停止して追加したCSSとクラスを外します。

他テーマのPjax、履歴操作の全条件、WP Rocketの遅延設定は別途確認が必要です。

まとめ

フェードインのアニメーション自体が好き嫌いがあると思いますが、アニメーションはサイトの雰囲気を高めたり、リッチ感が増す要素の一つになります。

動きに関してはCSSで調整できますので、ぜひプラグインを用いないフェードインアニメーションを試してみてください。

GitHubに残している旧例は本文をopacity:0で隠す方式です。現在の実装にはこのページの掲載コードを使ってください。

この見本の仕様と戻し方

この例は最初から本文を表示し、画面に入った時だけ動きを加えます。

JavaScriptが無効・未対応でも内容を隠しません。

OSの「動きを減らす」設定ではアニメーションを適用せず、内部のリンクへキーボードで移動した場合も動きを止めます。

旧画像のクラス名はfadeinですが、今回のコードではwaza-fadeinを指定してください。

戻す場合は追加したCSS・JavaScript（PHPの登録コードを含む）とブロックのwaza-fadeinクラスを取り除きます。

公開後にPC・スマホで表示、Tabキーでリンクへ移動できることを確認してください。

よくある質問：WordPressでブロックにふわっとフェードインアニメーションを追加するとき

プラグインを使わずに、フェードインを追加できますか？

できます。記事では、CSSで動きを指定し、JavaScriptでタイミングを指定するだけで、プラグインなしでアニメーションを追加できます。コードが苦手な方向けに、便利なプラグインも紹介されています。

CSSとJavaScriptは、どこに追加しますか？

記事では、CSSは「外観 → カスタマイズ → 追加CSS」または子テーマのstyle.cssへ追加します。JavaScriptはPHPを含むコードで、子テーマのfunctions.phpかCode Snippetsの一方へ追加し、JavaScript欄へPHP部分を貼りません。対象のブロックには、waza-fadeinクラスを指定します。

CSSを書き忘れると、本文が見えなくなりますか？

なりません。記事では、本文をopacity:0にして待つ旧方式は撤去し、この例は最初から本文を表示して、画面に入った時だけ動きを加えます。CSSを書き忘れた場合も本文が見える構成で、JavaScriptが無効・未対応でも内容を隠しません。

OSの「動きを減らす」設定をしている人には、どう表示されますか？

記事では、OSの「動きを減らす」設定ではアニメーションを適用せず、内部のリンクへキーボードで移動した場合も動きを止めます。ただし、記事では、OSの動きを減らす設定とブラウザー全体のJavaScript無効化は、今回の実ブラウザー確認には含めていません。

SWELLのPjaxで移動しても、動きますか？

記事では、SWELLのPjaxでは遷移後の対象ブロックも初期化します。2026年10月3日のWordPress 7.1.2 / SWELL 2.19.0では、対象のないページから実Pjaxで移動しても新しいブロックにis-revealedが付くことを確認しました。旧コードでは同じ移動後にクラスが付かず、フェードが始まりませんでした。

Pjaxの再初期化が働かないことはありますか？

あります。記事では、この登録はSWELLHOOKが読み込まれていることが前提で、スクリプトの遅延読み込みでSWELLHOOKが後から用意される設定では、Pjax後の再初期化が働かない場合があります。他テーマのPjax、履歴操作の全条件、WP Rocketの遅延設定は別途確認が必要です。

旧版のクラス名のまま使えますか？

使えません。記事では、旧画像のクラス名はfadeinですが、今回のコードではwaza-fadeinを指定します。旧版の.fadeinを常時opacity:0にするCSSは取り除きます。GitHubに残している旧例は本文をopacity:0で隠す方式で、現在の実装にはこのページの掲載コードを使います。

元に戻すには、どうしますか？

記事では、追加したCSS・JavaScript（PHPの登録コードを含む）とブロックのwaza-fadeinクラスを取り除きます。公開後にPC・スマホで表示、Tabキーでリンクへ移動できることを確認します。