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

2014.5.6 エンタメ

jquery

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

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

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

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

<style>
header#head-area {
	background: url(../img/背景画像のURL) left borrom repeat-x;
}
</style>

<header class="head-area">
	<h1 class="sitename">サイト名サイト名</h1>
</header>

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

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

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

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

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

 var scrollSpeed = 1;//px 移動する量
 var imgWidth = 567;//画像の幅

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

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

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

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

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 >= imgWidth){ posX = 0; }
  posX += scrollSpeed;
 $("#header").css("background-position" , posX+"px bottom")
} , 50);

意外と短い。

アニメーションの早さを調節したい場合は、setInterval末尾の、現在「50」となっている所を調節すればいいかと思います。
scollSpeedを触ってもいいのですが、1回のアニメーションで移動する単位なので、あまり大きくすると、アニメーションがスムーズに見えない可能性大です。

いかがでしたか?連休最終日でしたが、明日からのお仕事や製作に役立てば幸いです!(自分に対しても同じく)

僕は先日参加した勉強会で持って帰ってきたLESSと、Bootstrapを勉強して、
ワインを飲んでベッドに沈むとします。

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。