javascript - 動く背景画像

Question

みなさん、良い一日を！

誰かが私の問題について私を助けてくれるなら、私は直面しています。まさにこのような背景のウェブサイトを作ろうとしています。

http://clearairchallenge.com/

背景画像（雲）を水平に動かすのが本当に好きです。どうやってやるの？

Answer 1

http://jsfiddle.net/LwPX6/

例があると聞いてください:)

var intval = null;
var pos = 0;

$(document).ready(function() {


    intval = window.setInterval(moveBg, 200);
});

function moveBg() {

    pos++;

    $(".clouds").css({backgroundPosition: (pos * 10) + "px 0px"});
}

あいさつ:)

Answer 2

あなたは次のようなことを試すことができます

  $('#divId').animate(function() {
                backgroundPosition: '(-5000px 100px)'}, 5);
    });

ここでは、背景のx位置が5秒間で0から-5000pxに変更されます。時間と位置を変更して、望ましい結果を得ることができます。

更新された場合は、jqueryライブラリを使用する必要があります。ダウンロードするか、次のようにオンラインで使用できます。

たとえば、URLから使用する場合は、これを頭のセクションに入れます

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

また、これをヘッドセクションまたはボディのいずれかに書き込む必要がありますが、前のスクリプトタグの後に重要なことは重要ではありません。

<script type="text/javascript">

    $(document).ready(function() {
         $('#divId').animate(function() {
                backgroundPosition: '(-5000px 100px)'}, 5);
    });

</script>

Answer 3

このような小さな関数でjQueryは必要ありません！

試す...

<script type="text/javascript">
    var pos = 0;

    window.setInterval(function(){
      pos++;
      document.getElementsByClassName('clouds')[0].style.backgroundPosition = pos + "px 0px";
    }, 50);
</script>

交換する：getElementsByClassName('clouds')[0].styleまたはgetElementById('clouds').style私はそれを体に取り付けるので、簡単に：body.styleするでしょう。