jquery.backgroundPosition:複数の背景画像を常に動かせるJs



指定の複数背景画像を常に動か(アニメーション)してみます。

1.CSSの記述例

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
	color:#FFFFFF;
}
h1{
	font-size:18px;
	font-weight:bold;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#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: 100;
}
#foreground {
	background: url(images/foreground.png) repeat 90% 110%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 200;
}
#page-wrap {
	width: 720px;
	margin: 0 auto;
	position: relative;
	z-index: 300;
}
-->
</style>

2.読込むJsとJavaScriptの記述例

PNG画像をレイヤー的に指定して、
背景画像の位置を移動させてます。

jqueryのバージョンは1.3.2が良い様です。
バージョンが高い(1.8.xx)と動きませんでした。

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>
<script type="text/javascript">
$(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');

});
</script>

3.HTMLの記述例

    <div id="background"></div>
	<div id="midground"></div>
	<div id="foreground"></div>
	
	<div id="page-wrap">

	<h1>指定した3枚の背景画像が常に動きます。</h1>

	</div><!--/page-wrap-->

jquery.backgroundPosition:背景画像を常に動かすデモページ

ソース元:Starry Night by CSS-Tricks

png画像だとIEの古いバージョンとかの対応が面倒そうだけど、
もうブラウザの古いバージョンのことは考えない様にしよう。