【WordPress】パララックス（視差効果）の作り方

2021 8/12

2020.12.19 2021.08.12

マウスを動かしたりやスクロールした時に画像の一部が止まったり動いたりして見える表現をパララックス（視差効果）といいます｡

かなり昔からある表現ですが､トップページなどで目を引く表現なので､現在でも様々な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年生まで対象で、音声ペンなどのオリジナル教材を使用したそろばん学習で児童の集中力、暗算…

早速､簡単な作り方を紹介します｡

STEP

Illustratorで動かしたい画像を作成してSVGで出力します｡

赤いロゴ､緑の十字､青の星の3つのレイヤーを作成しています｡

uploadsフォルダに画像をアップロードします｡

STEP

function.phpに下記のコードを貼り付けます｡

ついでに見やすくするために背景も薄いグレーになるようにCSSも記述します｡

STEP

最後に記事のHTMLを記述します｡

data-depth=”0.60″でレイヤーの前後の位置を数値入力します｡

また下の記述ほど全面に表示する画像を指定します｡

以上です！

今回使用したライブラリ､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…