カーソルに合わせて背景が動く「Parallax JS」の導入と使い方

「Parallax JS」はカーソルを動かすと、実際にそこに立っているかのように、奥行きのある背景が動かせるJavaScriptプラグインです。スクロールに合わせた動きをする普通のパララックスとは違って、カーソルを動かしたり、デバイスを傾けたりすることで、奥行きのある背景が動きます。このプラグインを使ったサイトデザインは少しややこしいですが、きちんと構築すれば、今まで見たことがないようなオシャレなサイトが出来上がります。今回は複雑なのでデモを例に説明していきます。 [promoBtn url=”//paradise.antytle.com/2015/kaguyahime” text=”デモ”]

ファイルのダウンロードと配置

https://github.com/wagerfield/parallaxにアクセスして、右の「Download ZIP」よりファイルをダウンロードします。

圧縮フォルダを解凍して、deployフォルダの中の「parallax.min.js」を各自のディレクトリにコピーします。これがパララックスのメインプログラムです。

タグの追加

以下のコードを</body>の直前に追加します。任意のID属性は好きな名前に設定してください。今回はデモで使用しているID名(#scene)とします。

<script src="parallax.min.js"></script>
<script>
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>

Parallax JSの適用方法

Parallax JSは<ul>に適用する必要があるので、以下のようにID属性を追加します。「タグの追加」で指定したID名を使います。

    ...

ID属性の後に続けて、Parallax JSの動き方を調整するための属性を設定します。以下のようにdata属性を追加していきます。デモで使用している設定は4つだけですが、他にもたくさんの属性が用意されています。詳しくはhttps://github.com/wagerfield/parallax#behavioursをご覧ください。

    ...
  • data-friction-x – 横方向の慣性力。0.0~1.0までの範囲で設定でき、値が小さいほど滑らかでゆっくりな動きになる。
  • data-friction-y – 縦方向の慣性力。0.0~1.0までの範囲で設定でき、値が小さいほど滑らかでゆっくりな動きになる。
  • data-scalar-x – 横方向の移動範囲。0~∞までの範囲で設定でき、値が大きいほど横に動く幅が広くなる。
  • data-scalar-y – 縦方向の移動範囲。0~∞までの範囲で設定でき、値が大きいほど縦に動く幅が広くなる。

<li>にdata-depth属性を追加し、クラス属性(layer)も追加します。data-depthの値は0.00~1.00まで指定でき、数値が大きいほど動く量が増えます。そして後に記述された<li>ほど手前に表示される仕様となっています。これでカーソルに合わせて背景が動くようになります。

  • かぐや姫

  • ...

デザインを整える

動くようにはなりましたが、デザインしなければ話になりません。コーディングはできましたので、あとはスタイルシートの設定をしていきます。

#scene直下の<li>はParallax JSを動かすためのものなので、ここに各自のデザインを追加すると表示がグチャグチャになります。なので、<li>の中に追加した要素でデザインをしていくことになります。以下のcssを追加します。

* {
	margin: 0;
	padding: 0;
}

html,
body {
	color: #fff;
	font: 18px hannari;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}

#scene {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
	#scene > li {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
	}

.background {
/* 夜空の背景 */
	background: url(../images/night.jpg) no-repeat;
	background-size: cover;
	bottom: 0;
	position: absolute;
	width: 110%;
	left: -5%;
	top: -5%;
}

.moon {
/* 月 */
	margin: 3% 0 0 17%;
	height: 18%;
	width: 18%;
}

.title {
/* タイトル「かぐや姫」 */
	font-size: 250%;
	text-shadow: 0 8px 6px rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 30%;
	text-align: center;
	width: 100%;
}

最終的なコード

各画像は各自で用意してください。

<!DOCTYPE html>
<meta charset="utf-8">
<title>かぐや姫</title>
<style>
* {
	margin: 0;
	padding: 0;
}

html,
body {
	color: #fff;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}

#scene {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
	#scene > li {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
	}

.background {
/* 夜空の背景 */
	background: url(../images/night.jpg) no-repeat;
	background-size: cover;
	bottom: 0;
	position: absolute;
	width: 110%;
	left: -5%;
	top: -5%;
}

.moon {
/* 月 */
	margin: 3% 0 0 17%;
	height: 18%;
	width: 18%;
}

.title {
/* タイトル「かぐや姫」 */
	font-size: 250%;
	text-shadow: 0 8px 6px rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 30%;
	text-align: center;
	width: 100%;
}
</style>

  • かぐや姫

<script src="parallax.min.js"></script> <script> var scene = document.getElementById('scene'); var parallax = new Parallax(scene); </script>

正常に動作しないときは

  • 「parallax.min.js」のパス指定の確認。
  • 「jquery.parallax.min.js」と間違えていないか確認
  • ID属性の確認
  • ID属性がある<ul>直下の<li>にクラス属性を指定しているか確認(class=”layer”)

ライセンス

MIT Licenseなので、「parallax.min.js」の中に記述されているクレジットを削除しなければ、自由に改変、再配布、商用利用できます。

[promoBtn url=”//paradise.antytle.com/2015/kaguyahime” text=”デモ”]

あわせて読みたい