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

WordPressのブロックが画面へ入るタイミングで、フェードインを加える方法を紹介します。

アニメーションを追加するプラグインもありますが、ここではコードを使う方法を紹介します。

CSSで動きを定義し、JavaScriptで対象ブロックを検出します。

サンプル

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

追記

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

あわせて読みたい

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

著者

motoki

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

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

MOTOKI合同会社

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

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

JavaScriptで画面内への進入を検知し、CSSクラスを追加します。

CSSルール自体を毎回生成する処理ではありません。

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

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

ファイル全体の置換用ではありません。

既存のPHP開始タグを重ねず、Code Snippetsへも先頭のPHP開始タグは追加しません。

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

記事ごとのJavaScript欄を使う場合は、<script></script>の内側だけを入力し、PHP版との重複登録を避けます。

Pjaxで対象ページへ移動する構成では、移動前のページでも初期化処理が読み込まれる必要があるため、後述のサイト共通のPHP版を使って確認してください。

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のfocus-withinで動きを止めた後、フォーカスが外れるとアニメーションが再適用される場合があります。

ブロックにCSSを追加

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

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

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

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

確認

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

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

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

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

2026年10月2日の隔離環境で、画面内に入った時の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が付くことを確認しました。

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

アニメーションをやめる場合は今回のPHP・JavaScript登録を停止し、追加したCSSとクラスを外します。

本文を常時opacity:0にする旧方式へ戻さないでください。

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

まとめ

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

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

GitHubに残している旧例は本文をopacity:0で隠す方式です。

現在の実装にはこのページの掲載コードを使ってください。

この見本の仕様と戻し方

この例は本文を表示した状態から、画面内への進入時に動きを加えます。

フォーカス解除時の再適用も含め、実際の操作で確認してください。

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

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

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

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

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

処理の根拠はIntersectionObserverとfocus-withinの資料で確認できます。

動かない・本文が見えないときの対処

通常の再読み込みで動くか、内部リンクから移動した場合だけ動かないかを分けて確認します。

後者ならPjax後の初期化と読み込み順を調べます。

対象ブロックにwaza-fadeinが付いているかを確認し、画面内へ入った後にis-revealedが付くかを比べてください。

クラスが付かない場合と、付いても動かない場合を分けると調べる場所を絞れます。

クラスが付くのに動かない場合は、CSSの読み込みと動きを減らす設定を確認します。

動きを減らす設定で停止するのは、このコードの意図した動作です。

本文まで消える場合は追加した処理を止め、旧コードや別のCSSで非表示にしていないかを確認します。

フェードの速さを変える前に、本文が読める状態へ戻してください。

コードを二重に登録した場合は、掲載例をさらに追加せず登録箇所を整理します。

変更後は同じURLと操作経路で再確認し、比較条件をそろえてください。

導入後に記録する確認結果

通常読込、内部リンクからの移動、キーボード操作を別々に記録します。

使用したWordPress・テーマ・ブラウザーの版も控えます。

PCとスマートフォンで本文とリンクが使えるかを確かめ、表示しない場合は演出の適用を止めます。

今回加えた切り分け手順は、新たな実ブラウザー試験を行った結果ではありません。