画像の準備
とりあえずアニメーションさせる画像を用意します。ループさせるので継ぎ目のない画像を作成した方がいいかもです。
作成したら「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に戻しています。
これで完成です。


