マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」

「jquery.parallax.js」のダウンロードとインクルード

プラグインを下記URLからダウンロードします。
ここでは現時点で最新版である「0.2」を使用します。

jQuery Parallax | jQuery Plugins

ダウンロードしたらjsファイルを読み込みましょう。
jQuery本体も忘れず読み込みます。

html

	<script type="text/javascript" src="jquery1.5.1.js"></script>
	<script type="text/javascript" src="jquery.parallax-0.2-min.js"></script>
	

html + css

htmlとcssです。divを3つ作成してそれぞれバックグラウンド画像をcssで指定します。

html

	<div id="bg03">
	<div id="bg02">
	<div id="bg01">
	<!-- /#bg01 --></div>
	<!-- /#bg02 --></div>
	<!-- /#bg03 --></div>
	

css

	#bg01 {
		background: url(bg1.png);
	}
	#bg02 {
		background: url(bg2.png);
	}
	#bg03 {
		background: url(bg3.png);
	}
	

「jquery.parallax.js」の設定

「elements」に動かしたいセレクターを指定します。
x,y両方向に動かすなら「properties」のx,yそれぞれに「background-position」を指定します。
例えば横方向のみに動かしたいなら「x」だけになりますね。
「background-position」には最低限、「initial」と「multiplier（移動量）」を設定します。

javascript

	$('#bg03').parallax({
	  'elements': [
	    {
		 'selector': '#bg03',
		 'properties': {
		   'x': {
			'background-position-x': {
			  'initial': 0,
			  'multiplier': 0.05
			}
		   },
		   'y': {
			'background-position-y': {
			  'initial': 0,
			  'multiplier': 0.05
			}
		   }
		 }
	    },
	    {
		 'selector': '#bg02',
		 'properties': {
		   'x': {
			'background-position-x': {
			  'initial': 50,
			  'multiplier': 0.1
			}
		   },
		   'y': {
			'background-position-y': {
			  'initial': 50,
			  'multiplier': 0.1
			}
		   }
		 }
	    },
	    {
		 'selector': '#bg01',
		 'properties': {
		   'x': {
			'background-position-x': {
			  'initial': 100,
			  'multiplier': 0.6
			}
		   },
		   'y': {
			'background-position-y': {
			  'initial': 100,
			  'multiplier': 0.6
			}
		   }
		 }
	    }
	  ]
	});
	

通常マウスの方向に背景が移動しますが、「’invert’: true」にすることで逆方向に移動します。
「min」「max」を指定することで移動範囲を限定することもできます。