jQueryのanimateを使わず、setIntervalで背景を動かしてみました！

どうも！最近、無意識で寝落ちして朝を迎えるsatohmsysです！

僕のブログのヘッダ部分があまりにも地味だったので、街のシルエット背景を敷いて、動かしてみました！
お使いのブラウザでは、動いていますでしょうか？

なかなか印象が変わったかな、という感触です。これが動いているか動いてないかで、クリエイティブ度が変わってくるような気がします。
「GIFアニメでやればいいじゃん！」なんて言わない。

今回は仮に、こんな感じのHTML構成とします。

 &lt;style&gt;  header#head-area {  	background: url(../img/背景画像のURL) left borrom repeat-x;  }  &lt;/style&gt;    &lt;header class=”head-area”&gt;  	&lt;h1 class=”sitename”&gt;サイト名サイト名&lt;/h1&gt;  &lt;/header&gt;

<style>

header#head-area {

background: url(../img/背景画像のURL) left borrom repeat–x;

}

</style>

<h1 class=“sitename”>サイト名サイト名</h1>

</header>

header#head-areaに敷いてある背景画像を横に流していきたいと思います。

jQueryセレクタで背景を指定してある要素を選択

 $(function(){   $(“#head-area”).css(“background-position” , “0% bottom”);  })

$(function(){

$(“#head-area”).css(“background-position” , “0% bottom”);

})

横に流したい＝Xの値を動かす ため、
background-positionではXの値にあたる部分を「0%」としています。

次に、今回のアニメーションに重要な、変数を定義していきます。

 　var scrollSpeed = 1;//px 移動する量  　var imgWidth = 567;//画像の幅    　var posX = 0;//背景のスタート位置

　var scrollSpeed = 1;//px 移動する量

　var imgWidth = 567;//画像の幅

　var posX = 0;//背景のスタート位置

scrollSpeedには、背景画像がアニメーションで移動していく単位
imgWidthには、背景画像の横幅を
posXには、アニメーションの開始位置を、指定します。

setIntervalで繰り返し処理付きアニメーションを定義していく

animateではなく、setInterval関数を使ってアニメーションを繰り返し再生します。

 setInterval(function(){  　if(posX &gt;= imgWidth){ posX = 0; }  　posX += scrollSpeed;  　$(“#head-area”).css(“background-position” , posX+”px bottom”)  } , 50);

setInterval(function(){

　if(posX >= imgWidth){ posX = 0; }

　posX += scrollSpeed;

　$(“#head-area”).css(“background-position” , posX+“px bottom”)

} , 50);

一定時間で繰り返す（setInterval）－JavaScript入門

setIntervalは、一定時間に、関数を呼び出す関数です。
setInterval(呼び出す関数名 , 呼び出す間隔…ミリ秒)

今回は第1引数に直接関数を定義しているのでゴチャっとしています。続く第2引数の「50」が、「第1引数の関数」を呼び出す間隔です。

「第1引数の関数」の内容ですが、posXの値に、scrollSpeedの値を足していくのみの、ごくシンプルなものでした。

そしてその値が足された「posX」を、動かしたい背景を指定してあるHTMLのCSSに当てはめます。
今回だと、「#head-area」のbackground-positionのX値に当たる部分に「posX」を指定しています。

これだけの処理が、50ミリ秒間隔で繰り返されているということです。つまりは50ミリ秒で1ピクセル進んでいるという計算です。

途中のif(posX >= imgWidth) {posX = 0;}で、background-positionのX値に当たる部分を0に初期化して、アニメーションを繰り返しています。
全部書くとこんな感じです。

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