jQueryで背景画像を無限ループで回転させる

テキストや画像の背景画像を永遠に回転させることができます。

HTML例

<div class="imgBox">〜</div>

CSS例

.imgBox {
            background: url(bg.png) repeat-x;
        }

JavaScript例

jQuery記述なのでjQueryを読み込んでください。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript">
        $(document).ready(function () {
            var scrollSpeed = 0.1;
            var imgWidth = 1400;//動かしたい背景画像の幅を入力する
            var posX = 0;
            setInterval(function(){
                if (posX >= imgWidth) posX= 0;
                posX += scrollSpeed;
                $('.imgBox').css("background-position",posX+"px 100px");//右側は縦の表示位置
            }, 1);
        });
</script>

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