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

2020.12.192024.03.07

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

かなり昔からある表現ですが､トップページなどで目を引く表現なので､現在でも様々な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も記述します｡

add_action( 'wp_head', function () { ?>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
	<script>
    jQuery(function(){		
        var scene = document.getElementById('scene');
        var input = document.getElementById('scene-input');
        var parallax = new Parallax(scene, {
            hoverOnly: true,
            relativeInput: true,
            inputElement: input
            });
    });
	</script>
<?php } );

CSSです

.container {
    background-color: #f6f6f6;
}

STEP

HTMLの作成

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

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

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

<div class="container" style="float:left">
	<div id="scene" class="scene border" data-input-element="#scene-input">
		<div data-depth="0.60"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/bg01.svg"></div>
		<div data-depth="0.80"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/bg02.svg"></div>
		<div data-depth="1.00"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/visual.svg"></div>
	</div>
</div>

以上です！