JQueryで背景画像のアニメーション効果を紹介しているサイトはいくつかありますが、webOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」が一番分かりやすく勉強になりました。
この記事を元に少しアレンジしてサンプルを作成したので紹介します。
JQueryで背景画像を動かすアニメーション効果
これから紹介するサンプルはwebOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」とアメブロで使用してあるスクロールで背景画像を別々に動かすパララックス効果のコードをプラスしてサンプルを作成してあります。
それではサンプルを紹介していきます。
雲の背景画像をループさせアニメーション
雲の背景画像をループさせ、まるで雲が動いているかのようなアニメーション効果をもたらします。
コードは下記のような感じになります
htmlコード
<div class="skinBody"> この中が記事などのコード </div>
CSSコード
.skinBody{ background:#63c3eb url(背景画像のアドレス) fixed 0 0; }
JQueryコード
<script type="text/javascript"> $(function() { var bgsc1 = 0; var bgsc2 = 0; setInterval(function(){ bgsc1+= -1;//マイナスは左に、プラスは右に移動します。この場合だと-1なので左に1pxづつ移動します。右に移動させる場合は1に変えます。 bgsc2+= 0;//マイナスは上に、プラスは下に移動。このサンプルは0にしてあるので上下には移動しません。 $(".skinBody").css("background-position", bgsc1 + "px " + bgsc2 + "px"); }); }); </script>
星の背景画像が奥行がある感じでアニメーション
幾つかの星の背景画像を違う方向に動かしているので、奥行がある感じでアニメーションのような効果がある背景画像が演出されます。
コードは下記のような感じになります
htmlコード
<div class="skinBody"> <div class="skinBody2"> <div class="skinBody3"> <div class="skinFrame"> この中が記事などのコード </div> </div> </div> </div>
CSSコード
.skinBody{ background:#02000b url(背景画像アドレス) fixed repeat-x repeat 0 0; } .skinBody2{ background:url(背景画像アドレス) repeat 0 0; } .skinBody3{ background:url(背景画像アドレス) repeat 0 0; } .skinFrame{ background:url(背景画像アドレス) repeat 0 0; }
JQueryコード
<script type="text/javascript"> $(function() { var bgsc1 = 0; var bgsc2 = 0; var bgsc3 = 0; var bgsc4 = 0; setInterval(function(){ bgsc1+= 3;//マイナスは左に、プラスは右に移動します。この例だと右に3pxづつ移動します。 bgsc2 += 3;//マイナスは上に、プラスは下に移動します。この例だと下に3pxづつ移動します。 bgsc3 += 3; bgsc4 += -3; $(".skinBody3").css("background-position", bgsc1 + "px " + bgsc2 + "px"); $(".skinFrame").css("background-position", bgsc3 + "px " + bgsc4 + "px"); }); }); </script>
泡の背景画像が浮かんでいくような感じになるアニメーション
幾つかの泡の背景画像を縦方向に移動距離をずらしてループさせ、まるで泡が浮かんでいくようなアニメーション効果をもたらします。
コードは下記のような感じになります
htmlコード
<div class="skinBody"> <div class="skinBody2"> <div class="skinBody3"> <div class="skinFrame"> ここが記事の中身 </div> </div> </div> </div>
CSSコード
.skinBody{ background:#99cc00; } .skinBody2{ background:url(画像アドレス1) repeat 0 0; } .skinBody3{ background:url(画像アドレス2) repeat 0 0; } .skinFrame{ background:url(画像アドレス3) repeat 0 0; }
JQueryコード
<script type="text/javascript"> $(function() { var bgsc1 = 0; var bgsc2 = 0; var bgsc3 = 0; var bgsc4 = 0; setInterval(function() { bgsc1 += 0; bgsc2 += -2; bgsc3 += -5; bgsc4 += -7; $(".skinBody2").css("background-position", bgsc1 + "px " + bgsc2 + "px"); $(".skinBody3").css("background-position", bgsc1 + "px " + bgsc3 + "px"); $(".skinFrame").css("background-position", bgsc1 + "px " + bgsc4 + "px"); }); }); </script>
以上がJQueryで背景画像を動かすアニメーション効果の方法でした。
JQueryはまだまだ勉強中のため、もしかしたら誤りがあるかも知れません。その時はご指摘頂くとありがたいです。
最終更新日: 2013年3月11日
これを見てかっこいいなあと思ったのですが、
Win7+FireFoxで動きませんでした…。
コメントありがとうございます。
貴重なご意見ありがとうございました。
はじめまして。
横レスですが
>Firefoxで動かない
こちらのページを知人に見せられ、同じことを聞かれたので・・
例えば一番上の雲を動かすコードであれば
jQueryの9行目のコードを
},); から },1); とでもしておけば動くかと思います。(別に1じゃなくてもいいけど)
※macOS 10.9.x FireFoxで動作確認
それでは失礼致します
ピンバック: 繰り返し背景を全面表示してアニメーションする