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