JS / jQuery

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

jquery

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

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

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

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

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

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

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

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

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

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

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

一定時間で繰り返す(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に初期化して、アニメーションを繰り返しています
全部書くとこんな感じです。

意外と短い。

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

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

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

でわ!