マウスを動かしたりやスクロールした時に画像の一部が止まったり動いたりして見える表現をパララックス（視差効果）といいます｡
かなり昔からある表現ですが､トップページなどで目を引く表現なので､現在でも様々なWEBサイトで使用されています｡
本記事ではこのパララックス（視差効果）の作り方（カスタマイズ）をわかりやすく紹介いたします｡
目次
WordPressのパララックス（視差効果）表現のサンプルデータ
今回作成するサンプルはPCサイトでマウスをぐるぐる動かした時に､重ねている3枚の画像がずれて動く表現をさせています｡
パララックス（視差効果）の参考サイト
スクロールすると視差効果を体験できます｡
Firewatch
Firewatch: Out now for Windows, Nintendo Switch, PlayStation 4, Mac, and Linux
Firewatch is a first-person single-player mystery set in the Wyoming wilderness, where your only emotional lifeline is the person on the other end of a handheld…
マウスを動かすと視差効果を体験できます｡
トミーそろばん教室
トミーそろばん教室｜福島県須賀川市のそろばん教室
トミーそろばん教室は福島県須賀川市のそろばん教室。幼稚園年長、小学1年から6年生まで対象で、音声ペンなどのオリジナル教材を使用したそろばん学習で児童の集中力、暗算…
WordPressのパララックス（視差効果）表現の作り方
早速､簡単な作り方を紹介します｡
STEP
画像の用意
Illustratorで動かしたい画像を作成してSVGで出力します｡
赤いロゴ､緑の十字､青の星の3つのレイヤーを作成しています｡
uploadsフォルダに画像をアップロードします｡
STEP
function.phpにコードを記述
function.phpに下記のコードを貼り付けます｡
ついでに見やすくするために背景も薄いグレーになるようにCSSも記述します｡
STEP
HTMLの作成
最後に記事のHTMLを記述します｡
data-depth=”0.60″でレイヤーの前後の位置を数値入力します｡
また下の記述ほど全面に表示する画像を指定します｡
以上です！
Parallax.jsのドキュメント
今回使用したライブラリ､Parallax.jsのドキュメントです｡
他の表現を試したい時に参考にしてください｡
GitHub
GitHub – wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device
Parallax Engine that reacts to the orientation of a smart device – GitHub – wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart devic…
WordPressのパララックス（視差効果）表現の作り方まとめ
本記事では｢【WordPress】パララックス（視差効果）の作り方｣を紹介しました｡
マウスやスクロールした時に動く表現は目を引くので､インパクトを残したい時に有効です｡
最後にデメリットについても記述しておきます｡
- SVGの画像サイズが大きい｡
大きめの画像を用い､更に重ねたりするので負荷になります - JavaScriptを使用する
高速化の邪魔になる場合があります｡ - 主にPC版でしか使えない｡
基本的にはPCサイトでの表現になります｡スマホメインのサイトには向いてないです｡
また表現できたとしても負荷になります｡
すいみん工夫すれば､面白い表現ができると思います｡
リンク付きマトリックス図
すいみん画像からリンクに飛べます！
⇨ 【WordPress】マトリックス図からのリンクの作り方
あわせて読みたい
【WordPress】マトリックス図からのリンクの作り方
画像の図表からリンクを飛ばしてみたい！と思ったことはないでしょうか？ 実はイメージマップというやり方で簡単にリンクが作成（カスタマイズ）できるので紹介します｡ …
