本例はPCの細かいポインター入力で装飾画像を動かすものです。
コード例の修正ではjQueryへの暗黙の依存と存在しない入力要素の指定を取り除き、対象要素がないページでは初期化しないようにしました。
動きを減らす設定やタッチ中心の端末では静止表示にします。
マウスを動かしたり、スクロールしたりした時に画像の一部が止まったり動いたりして見える表現をパララックス（視差効果）といいます。
かなり昔からある表現ですが､トップページなどで目を引く表現なので､現在でも様々なWEBサイトで使用されています｡
本記事ではこのパララックス（視差効果）の作り方（カスタマイズ）をわかりやすく紹介いたします｡
WordPressのパララックス（視差効果）表現のサンプルデータ
コピー用コードは、条件に合うポインターで画像の範囲内を動かすと3枚のレイヤーに視差を付ける例です。
パララックス（視差効果）の参考サイト
スクロールすると視差効果を体験できます｡
マウスを動かすと視差効果を体験できます｡
WordPressのパララックス（視差効果）表現の作り方
早速､簡単な作り方を紹介します｡
Illustratorで動かしたい画像を作成してSVGで出力します｡
赤いロゴ､緑の十字､青の星の3つのレイヤーを作成しています｡
使用する画像を自分のサイトから配信し、各画像のURLを控えます。
下の画像は当時のファイル配置例です。
SVGを扱えない環境では、透過PNGなど配信可能な形式で画像を用意できます。
バックアップした子テーマのfunctions.phpに以下を一度だけ追加します。
既存のPHP開始タグは重複させません。
以前のwp_headへの直接出力コードは先に外してください。
対象のHTMLは記事のカスタムHTMLブロックに置き、sceneというIDは1ページに1つだけ使います。
このPHPは投稿や固定ページなどの個別ページでライブラリを読み込みます。
sceneがない場合に省略するのは初期化であり、ライブラリの読み込み自体ではありません。
add_action( 'wp_enqueue_scripts', function () {
if ( ! is_singular() ) { return; }
wp_enqueue_script( 'waza-parallax', 'https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js', array(), '3.1.0', true );
wp_add_inline_script( 'waza-parallax', <<<'JS'
(function () {
var scene = document.getElementById('scene');
if (!scene || typeof Parallax !== 'function') return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
new Parallax(scene, { hoverOnly: true, relativeInput: true });
})();
JS
);
} );以下のCSSは追加CSSか子テーマのスタイルシートへ記載します。
背景色と表示幅を指定するコードなので、functions.phpのPHP部分へそのまま貼らないでください。
#scene { position: relative; width: min(100%, 640px); overflow: hidden; background: #f6f6f6; }
#scene img { display: block; width: 100%; height: auto; }
最後に記事のHTMLを記述します｡
data-depth="0.60"はレイヤーの動く量に掛ける値です。
重なりの前後を指定するz-indexではありません。
この例では後に記述したレイヤーほど前面に重なります。
data-depthの値と、HTMLの並び順を分けて調整してください。
<div class="waza-parallax-demo">
<div id="scene" class="scene border">
<div data-depth="0.60"><img alt="" src="https://motoki-design.co.jp/wordpress/wp-content/uploads/bg01.svg"></div>
<div data-depth="0.80"><img alt="" src="https://motoki-design.co.jp/wordpress/wp-content/uploads/bg02.svg"></div>
<div data-depth="1.00"><img alt="" src="https://motoki-design.co.jp/wordpress/wp-content/uploads/visual.svg"></div>
</div>
</div>掲載例は外部CDNからライブラリを取得します。
取得に失敗した場合は初期化を行いません。
初期化しない場合、掲載CSSだけでは3枚の重なりを作らないため、縦に並ぶなどの静止表示になることがあります。
画像は自分のメディアURLへ置き換え、装飾用には空のalt属性を付けてください。
元に戻す場合は追加したPHP・CSS・HTMLだけを除去します。
Parallax.jsのドキュメント
今回使用したライブラリ､Parallax.jsのドキュメントです｡
他の表現を試したい時に参考にしてください｡
画像が動かないときの確認
HTMLはカスタムHTMLブロック、CSSは追加CSSか子テーマのスタイルシート、PHPは子テーマのfunctions.phpかCode Snippetsへ配置します。
sceneのIDを1ページに1つ置き、画像URLを自分のメディアへ置き換えます。
3枚の画像は重ねるため、縦横比をそろえると位置を調整しやすくなります。
2026年10月2日の独立したWordPress検証環境では、CDNのParallax.js 3.1.0と3枚のSVGを読み込み、ポインター操作で各レイヤーの位置が変わることを確認しました。
静止する場合は対象要素、CDNの取得、動きを減らす設定、hoverと細かいポインターの条件を順に確認します。
条件は初期化時に判定するため、端末やOSの設定を変えて確かめる際はページを再読み込みします。
この検証ブラウザーではスマホ幅に変えてもポインターの種類は変わらないため、タッチ端末での静止表示を実測したとは扱っていません。
取得先と初期化の仕様はParallax.jsの公式資料を参照できます。
まとめ
本記事では｢【WordPress】パララックス（視差効果）の作り方｣を紹介しました｡
マウスやスクロールした時に動く表現は目を引くので､インパクトを残したい時に有効です｡
最後にデメリットについても記述しておきます｡
- 画像の容量と複雑さを確認する
SVGの容量は図形の数や構成によって変わります。重ねる画像の合計容量と、表示時の負荷を確認します。 - JavaScriptを使用する
高速化の邪魔になる場合があります｡ - この例では入力条件を限定する
端末名や画面幅ではなく、hoverと細かいポインターの条件で初期化を分けます。タッチ中心の端末では動かさず、静止状態でも内容が読めるか確認します。
motoki工夫すれば､面白い表現ができると思います｡
この記事で紹介しているコードの旧版をGitHubにも保存していますが、今回の修正とは同期していません。追加・差し替えには本記事の掲載コードを使ってください。
