WEBOPIXEL

jQueryで背景画像をアニメーションで無限ループさせる

Posted: 2010.09.02 / Category: javascript / Tag: 

あまり使う機会はない気がしますがcssで指定した背景画像をjQueryでループアニメーションしてみます。

Sponsored Link

言葉だけでは、え、どういうこと? という感じなんでサンプルを見ていただければと思います。

demo

画像の準備

とりあえずアニメーションさせる画像を用意します。ループさせるので継ぎ目のない画像を作成した方がいいかもです。
作成したら「bg.png」という名前で保存します。
今回はこんな画像を作成してみました。

bg.png

デザインがしょぼいとか言ってはいけない!

html+cssでバックグランドに画像を配置

html+cssは特別なことはなく普通に作ります。
画像はbodyの「background」で配置してみました。

html

		<body>
		<div id="container">
			<h1>jQueryでバックグラウンドを無限ループ</h1>
			<p>
				このページはjQueryでバックグランド画像をアニメーションループさせるサンプルページです。
			</p>
		</div>
		</body>
	

css

		body{
			background: #A6E9FF url(bg.png) repeat-x;
			margin:0;
			padding:0;
		}
		#container {
			margin: 50px auto 0px;
			width: 800px;
			background: #FFFFFF;
			padding: 30px;
			height: 500px;
		}
	

jQueryのセレクタでbackground-positionにアクセス

背景画像を動かすにはbodyの「background-position」にアクセスする必要がありそうですね。
jQueryのセレクターで試しに画像の位置を変更してみましょう。

javascript

		$(document).ready(function () {
			$('body').css("background-position","100px 100px");
		});
	

これで背景画像がx=100px,y=100pxの位置に配置できたと思います。
この数値をリアルタイムに変更すればアニメーションが再現できそうです。

「setInterval」関数を使用してアニメーション

アニメーションするには色々方法はあると思いますが、今回は「setInterval」関数を使用します。
「setInterval」は指定した時間毎に繰り返し処理を実行するタイマーを設置ことができます。
書式は第1引数に実行する関数名、第2引数に関数を実行する間隔を指定します。

setInterval(関数名,実行間隔)

タイマーの中身は「hoge += 1」とすればhogeは1づつ足されていきますので、この変数をbackground-positionのxに入れればいける気がします。

javascript

		$(document).ready(function () {
			//アニメーションスピード
			var scrollSpeed = 1;
			//画像サイズ
			var imgWidth = 500;
			//画像の初期位置
			var posX = 0;
			//ループ処理
			setInterval(function(){
				//画像のサイズまで移動したら0に戻る。
				if (posX >= imgWidth) posX= 0;
				//scrollSpeed分移動
				posX += scrollSpeed;
				$('body').css("background-position",posX+"px 0px");
			}, 1);
		});
	

「posX += scrollSpeed」だけだと変数の許容範囲を越えてしまうので、11行目では画像サイズ分移動したら0に戻しています。
これで完成です。