スクロールすると星の背景画像が奥行がある感じで動く

スクロールすると星の背景画像が奥行がある感じで動きます。

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

4つの要素に背景画像が設定してあり、1つは固定した背景画像で、もう1つは通常の背景画像が繰り返し設定してあり、残り２つがそれぞれ違う方向に移動していくので、奥行があるような感じの動きになります。

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;
$(window).scroll(function() {
    bgsc1+= 3;//マイナスは左に、プラスは右に移動します。この例だと右に3pxづつ移動します。
    bgsc2 += 3;//マイナスは上に、プラスは下に移動します。この例だと下に3pxづつ移動します。
    bgsc3 += 3;
    bgsc4 += -2;
    $(".skinBody3").css("background-position", bgsc1 + "px " + bgsc2 + "px");
    $(".skinFrame").css("background-position", bgsc3 + "px " + bgsc4 + "px");
});
});
</script>