泡の背景画像が浮かんでいくような感じになるアニメーション

幾つかの泡の背景画像を縦方向に移動距離をずらしてループさせ、まるで泡が浮かんでいくようなアニメーション効果をもたらします。

背景画像を設置する要素名(id名やclass名)はサイトによって異なると思いますのでそれに合わせて要素名(id名やclass名)は変更してください。

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>