jQueryで複数の背景画像をアニメーションする方法：jquery.backgroundPosition.jsの活用｜DAD UNION

今回は、jquery.backgroundPosition.jsを使って複数の背景画像をアニメーションさせて常に動かし続ける方法を紹介します。
この方法を使うことで、ウェブページにダイナミックな効果を加えることができ、訪問者にインパクトを与えることができます。

Contents

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

背景画像のCSS設定

まず、背景画像を設定するための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>

　
このCSSコードでは、背景画像をbodyの中に配置し、それぞれ異なる位置で繰り返し表示させます。また、z-indexを使用して、画像の重なり順を指定しています。

jquery.backgroundPosition.jsを使って背景画像を動かすJavaScriptの記述

次に、jquery.backgroundPosition.jsを使って背景画像を動かすためのJavaScriptコードを記述します。jquery-1.3.2.min.jsとjquery.backgroundPosition.jsファイルを読み込みます。
このコードは、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>

　
このJavaScriptコードでは、まず背景画像の初期位置を設定し、その後、animateメソッドを使って背景画像の位置を移動させます。それぞれのレイヤーが異なる速度で動くように設定されています。

HTMLの記述

最後に、HTMLコードを記述して、背景画像を配置します。以下のコードでは、3つの背景画像をそれぞれのdiv要素に設定しています。

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

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

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

　
このHTMLコードでは、背景画像を配置するためのdiv要素を用意し、その中にページのコンテンツを配置しています。これにより、背景画像が常に動き続けるようになります。