jQueryで背景画像を無限ループ
jQueryで背景画像を無限ループ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryで背景画像を無限ループ</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function () { //アニメーションスピード var scrollSpeed = 0.1; //画像サイズ var imgWidth = 1600; //画像の位置 var posX = 0; //ループ処理 fadeTimer = setInterval(function(){ //画像のサイズまで移動したら0に戻る。 if (posX >= imgWidth){ posX= 0; } posX += scrollSpeed; $('body').css("background-position",posX+"px 0"); }, 1); }); </script> <style> body{ background: #FFF url(bg.png) repeat-x; margin:0; padding:0; } #container { margin: 200px auto 0px; width: 800px; background: #FFF; padding: 30px; height: 500px; } </style> </head> <body> <div id="container"> <h1>jQueryで背景画像を無限ループ</h1> <p> jQueryで背景画像をアニメーションループさせる。 </p> </div> </body> </html>