【マウスオーバー】画像・背景画像をマウス操作に合わせて動かすプラグイン【jquery.parallax.js】

画像や背景画像をマウス操作に合わせて動かすことができるプラグイン、jquery.parallax.jsを利用します。移動幅や移動スピードの設定も可能です。

htmlのコードは下記になります。
対象の全てのコンテンツを格納するdivタグに、カスタムデータ属性で移動幅と移動スピードを設定します。friction-xはX軸の移動スピード、friction-yはY軸の移動スピード、scalar-xはX軸の移動幅、scalar-yはY軸の移動幅になります。
対象の画像と背景画像を格納するdivタグにはclass=”layer”を付与します。プラグインを動かすために、必ずこのクラス名で設定が必要です。またdata-depthで奥行きの深さを0.00～1.00の間で設定します。この数値が大きいほど動きも大きくなります。

<div class="move_contents" data-friction-x="0.1" data-friction-y="0.1" data-scalar-x="10" data-scalar-y="15">
	<div class="move01 layer" data-depth="0.5"><img src="1.png" alt=""></div>
	<div class="move02 layer" data-depth="0.2"><img src="2.png" alt=""></div>
	<div class="move03 layer" data-depth="0.15"><img src="3.png" alt=""></div>
	<div class="move04 layer" data-depth="0.1"></div>
</div>

続いてCSSのコードです。
背景画像も動かすため、対象の全てのコンテンツを格納するdivタグはoverflow: hiddenを設定します。これでdivタグからはみ出した部分は表示されません。背景画像を格納するdivタグはwidth: 106%、height: 106%を設定します。表示位置はtop: -3%、left: -3%で少し左上にずらします。全てのコンテンツを格納するdivタグよりも一回り大きくすることで、背景画像が動いても余白が表示されないようにします。

.move_contents {
	position: relative;
	width: 100%;
	height: 427px;
	max-width: 640px;
	margin: 0 auto;
	overflow: hidden;
}
.move01 {
	position: absolute;
	top: 30%;
	left: 65%;
	max-width: 121px;
	z-index: 2;
}
.move02 {
	position: absolute;
	top: 10%;
	left: 10%;
	max-width: 180px;
	z-index: 2;
}
.move03 {
	position: absolute;
	top: 50%;
	left: 45%;
	max-width: 36px;
	z-index: 2;
}
.move04 {
	position: absolute;
	top: -3%;
	left: -3%;
	width: 106%;
	height: 106%;
	background: url(sky.jpg) no-repeat center;
	background-size: cover;
	z-index: 1;
}

最後にjsファイル読み込み部分のコードです。

<script src="jquery.min.js"></script>
<script src="jquery.parallax.js"></script>
<script>
$(function() {
	$('.move_contents').parallax();
});
</script>