どうも！最近、無意識で寝落ちして朝を迎えるsatohmsysです！
僕のブログのヘッダ部分があまりにも地味だったので、街のシルエット背景を敷いて、動かしてみました！
お使いのブラウザでは、動いていますでしょうか？
なかなか印象が変わったかな、という感触です。これが動いているか動いてないかで、クリエイティブ度が変わってくるような気がします。
「GIFアニメでやればいいじゃん！」なんて言わない。
今回は仮に、こんな感じのHTML構成とします。
1 2 3 4 5 6 7 8 9 | <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セレクタで背景を指定してある要素を選択
1 2 3 | $(function(){ $(“#head-area”).css(“background-position” , “0% bottom”); }) |
横に流したい＝Xの値を動かす ため、
background-positionではXの値にあたる部分を「0%」としています。
次に、今回のアニメーションに重要な、変数を定義していきます。
1 2 3 4 | var scrollSpeed = 1;//px 移動する量 var imgWidth = 567;//画像の幅 var posX = 0;//背景のスタート位置 |
scrollSpeedには、背景画像がアニメーションで移動していく単位
imgWidthには、背景画像の横幅を
posXには、アニメーションの開始位置を、指定します。
setIntervalで繰り返し処理付きアニメーションを定義していく
animateではなく、setInterval関数を使ってアニメーションを繰り返し再生します。
1 2 3 4 5 | 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に初期化して、アニメーションを繰り返しています。
全部書くとこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 | //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を勉強して、
ワインを飲んでベッドに沈むとします。
でわ！