視覚的にも楽しい動く背景の設置方法[CSS][js]

css-tricksより、オートムービングの視差背景の作成方法の紹介です。

デモページはこちらから

back0904071.jpg

設置方法はまず下記のようにレインアウトをマークアップします。

HTML

<div id="background"></div>
<div id="midground"></div>
<div id="foreground"></div>

各「レイヤー」は全スクリーンをカバーする絶対位置したdivです。

CSS

#background {
	background: url(../images/background.png) repeat 5% 5%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 100;
}

#midground {
	background: url(../images/midground.png) repeat 20% 20%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 200;
}

#foreground {
	background: url(../images/foreground.png) repeat 90% 110%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 300;
}

上記のようにCSSを組んで、あとはスクリプトを設置するだけです。

このアニメーションはjQueryとjQueryプラグインを利用しています。

JavaScript

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>

上記のようにjQueryとjQueryプラグインbackground-position animationsが必要です。

さらに下記のようにアニメーションを制御するスクリプトを組みます。

$(function(){
	$('#midground').css({backgroundPosition: '0px 0px'});
	$('#foreground').css({backgroundPosition: '0px 0px'});
	$('#background').css({backgroundPosition: '0px 0px'});
	$('#midground').animate({
		backgroundPosition:"(-10000px -2000px)"
	}, 240000, 'linear');
	$('#foreground').animate({
		backgroundPosition:"(-10000px -2000px)"
	}, 120000, 'linear');
	$('#background').animate({
		backgroundPosition:"(-10000px -2000px)"
	}, 480000, 'linear');
});