繰り返し背景を全面表示してアニメーションする

前回の「背景を SVG で全面表示し、パターン化をアニメーションさせる」がSVGの要素を全て対応しているというブラウザが少ない為、あまり実践的ではありませんでした。

今回はついでにjQueryと画像(png)を使った例もやっておこうと思います。

1.背景を全面表示して、グラデーションにする

CSS で背景を全面表示する

背景を全面表示するには、
CSS で min-width:100% min-height:100% を指定します。

body { margin: 0;padding: 0; }
#wrap{
position:fixed; top:0;left:0;
min-width:100%; min-height:100%;
}

CSS で背景にグラデーションをかける

CSS で背景にグラデーションをかけるには以下のようにします。

#wrap{
background: -moz-linear-gradient(top, red, white);
background: -webkit-linear-gradient(top, red, white);
background: linear-gradient( red, white);
}

DEMO を見る

2.背景にパターン画像を設定して、アニメーションさせる

CSS 背景にパターン画像を設定

泡の背景画像を３つ用意して、CSSで背景に繰り返し設置します。

.skinBody1{
background: url(./images/awa1.png) repeat 0 0;
}
.skinBody2{
background: url(./images/awa2.png) repeat 0 0;
}
.skinBody3{
background: url(./images/awa3.png) repeat 0 0;
}

jQuery で背景のパターン画像をアニメーションさせる

jQueryのsetInterval関数を使って、
CSSのbackground-positionのＸ座標を動かします。

$(function() {
    var   bgscx1 = 0;var   bgscy1 = 0;
    var   bgscx2 = 0;var   bgscy2 = 0;
    var   bgscx3 = 0;var   bgscy3 = 0;
setInterval(function(){
    bgscx1 += 0.15;bgscy1 += 0;
    bgscx2 += 0.25;bgscy2 += 0;
    bgscx3 += 0.75;bgscy3 += 0;
	$(".skinBody1").css("background-position", bgscx1 + "px " + bgscy1 + "px");
    $(".skinBody2").css("background-position", bgscx2 + "px " + bgscy2 + "px");
	$(".skinBody3").css("background-position", bgscx3 + "px " + bgscy3 + "px");
   
});
});

DEMO を見る

参考サイト

以下を参考にさせていただきました。

webOpixelさんの記事
jQueryで背景画像をアニメーションで無限ループさせる

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