jQueryで背景画像リピートをエンドレスで動かす為の方法・手順

背景画像をず~っと横にスライド、もしくは縦にスライドさせ続ける方法です。

※jQueryソースを読む前にjQuery本体読み込みを忘れずに!

サンプルHTML部

<div id="sample">&nbsp;</div>

CSSサンプル部

#sample{
  background-image:url(画像のファイルパス);
  background-repeat:repeat;
}

jQuery部

横流れバーション

セレクタの”#sample”は適宜変更してください。(2箇所あります)

下記ソースでは背景は要素のbottomに揃うので”bottom”を”top”などに変更もできます。

右に流れていくようになってますが、左に流したかったら”var scrollSpeed”の値をマイナスにしてください。

$(function(){
    $("#sample").css("background-position" , "0% bottom");//横に流したい=Xの値を動かすため、Xの値にあたる部分を「0%」としています。
    
    var scrollSpeed = 1;//px 移動する量
    var imgWidth = 500;//画像の幅
    var posX = 0;//背景のスタート位置(この後の記述でこの変数posXの数値が増加する事で背景画像の移動が可能となります)
    
    setInterval(function(){
        if(posX >= imgWidth){ posX = 0; }//変数posXの値が画像の横幅の数値まで増加したらposXの値を0に戻す
        
        posX += scrollSpeed;//posXの値に、scrollSpeedの値を足していく
        
        $("#sample").css("background-position" , posX + "px bottom")//上でどんどん増加するposXをbackground-positionの横位置に挿入
      } , 50);//移動スピードを変更したい時はこの「50」の数値を増減させる
      
});

縦流れバーション

セレクタの”#sample”は適宜変更してください。(2箇所あります)

下に流れていくようになってますが、上に流したかったら”var scrollSpeed”の値をマイナスにしてください。

$(function(){
    $("#sample").css("background-position" , "left 0%");//縦に流したい=Yの値を動かすため、Yの値にあたる部分を「0%」としています。
    
    var scrollSpeed = 1;//px 移動する量
    var imgHeight = 242;//画像の高さ
    var posY = 0;//背景のスタート位置
    
    setInterval(function(){
        if(posY >= imgHeight){ posY = 0; }//変数posYの値が画像の横幅の数値まで増加したらposYの値を0に戻す
        
        posY += scrollSpeed;
        
        $("#sample").css("background-position" , "left " + posY + "px")//上でどんどん増加するposYをbackground-positionの縦位置に挿入
      } , 50);
      
});

以上です。

▼こちらを参考にさせてもらいました。

  • このエントリーをはてなブックマークに追加
スポンサーリンク
スポンサーリンク