jquery.backgroundPosition.jsを使って複数の背景画像を常に動かせる方法｜DAD UNION

jquery.backgroundPosition.jsを使って指定の複数背景画像を常に動かし続ける（アニメーション）方法をご紹介します。

Contents

動かし続ける背景画像のCSSの記述
jquery.backgroundPosition.jsを使って指定の複数背景画像を常に動かし続けるJavaScriptの記述
複数背景画像を常に動かし続けるHTMLの記述
jquery.backgroundPosition：背景画像を常に動かすデモページ
ソース元：Starry Night by CSS-Tricks

動かし続ける背景画像のCSSの記述

※動かし続ける背景画像を3パターン（#background、#midground、#foreground）用意しました。必要に応じて変更して下さい。

<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>

jquery.backgroundPosition.jsを使って指定の複数背景画像を常に動かし続けるJavaScriptの記述

※jquery-1.3.2.min.jsとjquery.backgroundPosition.jsファイルを読み込みます。（jqueryのバージョンが高いと動かなくなるかもです）PNG画像をレイヤー的に指定して、背景画像の位置を移動させてます。

<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>

複数背景画像を常に動かし続けるHTMLの記述

※3パターンの背景画像を用意しました。

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

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

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