雲の背景画像をループさせアニメーション

雲の背景画像をループさせ、まるで雲が動いているかのようなアニメーション効果をもたらします。

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

このサンプルでは縦方向は0pxにしてあるので横方向のみ移動していきます。

背景画像が左に1pxづつ移動し無限にループします。

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>