JQueryで背景画像を動かすアニメーション効果

JQueryで背景画像を動かすアニメーション効果

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日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

JQueryで背景画像を動かすアニメーション効果の関連記事

JQueryで背景画像を動かすアニメーション効果” への4件のコメント

  1. これを見てかっこいいなあと思ったのですが、
    Win7+FireFoxで動きませんでした…。

    • コメントありがとうございます。

      貴重なご意見ありがとうございました。

    • はじめまして。

      横レスですが

      >Firefoxで動かない

      こちらのページを知人に見せられ、同じことを聞かれたので・・
      例えば一番上の雲を動かすコードであれば

      jQueryの9行目のコードを
      },); から },1); とでもしておけば動くかと思います。(別に1じゃなくてもいいけど)

      ※macOS 10.9.x FireFoxで動作確認

      それでは失礼致します

  2. ピンバック: 繰り返し背景を全面表示してアニメーションする

うおさかな にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*