単純だけど簡単な背景画像のパララックスを実現するjQueryのスクリプト

JavaScript

スクロールで背景画像がズレるやつを制作しました。パララックスとか言うやつですね。まあコンテンツごとの背景がズレるだけなので、視差と呼べるかは微妙ですけれど、他のをみるとそう呼んでもいい感じですね。

とりあえず今回のウリはタイトル通り単純だけど簡単ってところです。パララックスする要素をまとめて指定するだけでOK。あとは動きの量を調整したければする位です。まあ、大したモノではありませんし、もう新しいって程でもありませんが、チョット試してみようかなって思ってる方にはイイかもしれません。

Demo

必要なファイル

対応ブラウザ

  • Google Chrome
  • Safari
  • Firefox
  • Internet Explorer7～
  • Opera

※Windowsのみの確認です。また、Internet Explorer以外は記事投稿時の最新版を対象にした確認です。

コーディング＆設定

HTML

HTMLヘッダー内でjquery.jsを読み込む。

<script src="jquery.js" type="text/javascript"></script>

コンテンツ（以下の例だと#box1、#box2）はいくつでも問題ありません。

<div id="wrap">
	<div id="box1">
		<div class="inner">コンテンツ1</div>
	</div>
	<div id="box2">
		<div class="inner">コンテンツ2</div>
	</div>
</div>

CSS

以下のCSSを記述。z-indexの値は下のコンテンツになるほど増やす。

#wrap > div {
	min-width: 960px;
	background: no-repeat 50% 0 fixed;
	margin: 0 auto;
	position: relative;
}
#wrap #box1 {
	height: 1200px;
	background-image: url(sample1.jpg);
	z-index: 1;
}
#wrap #box2 {
	height: 1000px;
	background-image: url(sample2.jpg);
	z-index: 2;
}
#wrap .inner {
	width: 800px;
	margin: 0 auto;
}

JavaScript

以下のスクリプトを記述。10、11行目をHTMLや仕様に合わせて変更。

(function($){

	$(function(){
		parallax();
	});

	function parallax(){

		//変数設定
		var elm = $("#wrap").find("> div"); //背景を動かす要素
		var sp = 5; //数値が小さいほど視差が大きくなる
		var win = $(window);

		//配列作成
		pos = [];
		os = [];
		osNextCheck = [];
		osNext = [];
		h = [];
		posArray = [];
		posY = [];

		//配列設定
		elm.each(function(i){
			var self = $(this);
			pos[i] = self.css("background-position");
			os[i] = self.offset().top;
			osNextCheck[i] = self.next().size();
			if(osNextCheck[i] != 0){
				osNext[i] = self.next().offset().top;
			}
			else{
				h[i] = self.height();
				osNext[i] = os[i] + h[i];
			}
			if(pos[i]){
				var posArraySet = pos[i].split(" ");
				posArray[i] = new Array(posArraySet[0], posArraySet[1]);
				posY[i] = posArray[i][1].replace("px", "");
			}
			else{
				posY[i] = elm.css("background-position-y").replace("px", "");
			}
		});

		//スクロールイベント
		win.scroll(function(){
			var y = $(this).scrollTop();
			var winH = win.height();
			elm.each(function(i){
				var self = $(this);
				if(pos[i]){
					if(y > os[i] - winH && y < osNext[i]){
						self.css("background-position", posArray[i][0] + parseInt(-y / sp + os[i] / sp) + "px");
					}
				}
				else{
					self.css("background-position-y", parseInt(-y / sp + os[i] / sp) + "px");
				}
			});
		});

	}

})(jQuery);

注意点

ウィンドウサイズにより背景画像の表示範囲がある程度変わりますので、視差の量やコンテンツの高さで調整して下さい。

あとがき

今回は仕事でたまたま制作したものが、そのままでも公開できそうで、内容も悪くなかなと思って記事にしました。相も変わらず自分の書いたコードの悪いところがわかりません。まあ動作しているからとりあえずはイイんですけれど。あぁ師匠が欲しい。

Top