SAMPLE01…背景画像を繰り返しエンドレスに横移動

ソースコード

$(function(){
    $("#sample01").css("background-position" , "0% bottom");
    
    var scrollSpeed = 1;//px 移動する量
    var imgWidth = 500;//画像の幅
    
    var posX = 0;//背景のスタート位置
    
    setInterval(function(){
        if(posX >= imgWidth){ posX = 0; }
        
        posX += scrollSpeed;
        
        $("#sample01").css("background-position" , posX+"px bottom")
      } , 50);
      
});

SAMPLE02…背景画像を繰り返しエンドレスに縦移動

ソースコード

$(function(){
    $("#sample02").css("background-position" , "left 0%");
    
    var scrollSpeed = 1;//px 移動する量
    var imgHeight = 242;//画像の高さ
    
    var posY = 0;//背景のスタート位置
    
    setInterval(function(){
        if(posY >= imgHeight){ posY = 0; }
        
        posY += scrollSpeed;
        
        $("#sample02").css("background-position" , "left " + posY + "px")
      } , 50);
      
});

SAMPLE03…繰り返し無しでエンドレスに移動

ソースコード

$(function(){
    $("#sample03").css("background-position" , "0% bottom");
    
    var scrollSpeed = 1;//px 移動する量
    var acrossWidth = 500;//画像の幅
    
    var posX = -132;//背景のスタート位置
    
    setInterval(function(){
        if(posX >= acrossWidth){ posX = -132; }
        
        posX += scrollSpeed;
        
        $("#sample03").css("background-position" , posX+"px bottom")
      } , 50);
      
});