web-dev-qa-db-ja.com

背景画像を左から右へループで移動

次のWebサイト http://kxip.in とまったく同じ方法で、ページの背景画像を左から右に移動させたいのですが、これを実現する方法を提案してください。

ありがとう＆よろしく

javascriptcsshtmlbackground-image
11
user3378013

挑戦的な解決策で興味深い質問。ありがたいことに、 stackoverflow.com があなたの仕事を手助けするためにここにあります！

明らかに、jQueryが必要になります！そこで、jQueryをいくつか取得して、戻ってきます。

バック？すごい。

始めましょう。まず、次の行をコードに追加します。

_$(function(){

})
_

それで、その_$_の魔法のものは何ですか？実際にそれを学んでいることを気にしないでください！学ぶためではなく、答えを得るためにここにいます！しかし、気になるタイプの場合は、新しいタブを開いて、stackoverflow.comで「これは$(function(){ })について」と質問してください。誰かがあなたを記入します！ JQUERYにタグを付けることを忘れないでください！

では、背景画像をアニメーション化したいと思います。 [〜＃〜]タフ[〜＃〜]。もちろん、これを行う方法はたくさんありますが（HTML、CSS、JAVASCRIPTには常に複数の方法があります！）しかし、私はJQueryの方法を好みます。上に奇妙なドル記号のものを覚えていますか？それに戻りましょう！

_$(function(){
    setInterval(function(){

    }, 500);
})
_

いくつかのプログラムを追加しました！ setIntervalは、最大500ミリ秒をカウントし、内部でコードを実行するカウンターです。なぜ500？わからない、私は マジックナンバー が好きだ。したがって、timerjiggymathingがあり、さらにいくつかのプログラムが必要です。背景を追加するにはどうすればよいですか？

_$(function(){
    setInterval(function(){
        $('body').css('background-position', '0 0');
    }, 500);
})
_

わかりました、今、私たちはどこかに着いています！私たちのjQueriesは実際には背景位置を0、0に設定しています。まだそれほど興味深いものではありません。もう少しできるか見てみましょう。

_$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', '0 ' + x + 'px');
    }, 500);
})
_

試してみましょう！

http://jsfiddle.net/hY5Dx/

ちょっと、あなた。その画像は大きすぎて、愚かな子猫が上がっています！コードに戻ります。

_$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', x + 'px 0');
    }, 500);
})
_

http://jsfiddle.net/hY5Dx/1/

ああ、もっと好きです！しかし、男...それはひどく遅いですか？アップグレードしましょう！

_$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', x + 'px 0');
    }, 10);
})
_

http://jsfiddle.net/hY5Dx/2/

OH SNAPPPPPP。スクロールするkittenzを入手しました！ JavaQueryはすごい！

正直なところ、その背景画像は正義を行っていません。それを更新する時が来ました！

http://jsfiddle.net/hY5Dx/3/

そうそう、今私たちは蹴っている！

SO、それがあります！あなたがやりたいことを行うための多くの方法の1つ。

幸運を。楽しんで。

51
Jack

これがCSSソリューションです：

[〜＃〜] fiddle [〜＃〜]

body {
    background: url(http://kxip.in/images/mohalistadium.jpg) repeat;
    -webkit-animation: loader 16s steps(100) infinite;
    -moz-animation: loader 16s steps(100) infinite;
    -ms-animation: loader 16s steps(100) infinite;
    -o-animation: loader 16s steps(100) infinite;
    animation: loader 16s steps(100) infinite;
}

@-webkit-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-moz-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-ms-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-o-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
8
Danield

それは簡単です！単純なJavaScriptを使用してください！

jsFiddleをチェックアウト

コード：

<html>
<head>
    <title>BackGround Slide</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
         // speed in milliseconds
         var scrollSpeed = 70;

         // set the default position
         var current = 0;

         // set the direction
         var direction = 'h';

         function bgscroll() {

             // 1 pixel row at a time
             current -= 1;

             // move the background with backgrond-position css properties
             $('body').css("backgroundPosition", (direction == 'h') ? current + "px 0" : "0 " + current + "px");

         }

         //Calls the scrolling function repeatedly
         setInterval("bgscroll()", scrollSpeed);
    </script>
    <style type="text/css">
        body {
            background-image: url('http://kxip.in/images/mohalistadium.jpg');
        }
    </style>
</head>
<body>

</body>
</html>
0
Krimson

いくつかのjs/jQueryを使用します。

function move(){
    var element = $('#selector');
    element .css('background-position-x', (parseInt(element.css('background-position-x') - 10));
    //Check if need to reset background-position-x to Origin.
}
0
Justinas

これを実現する最も簡単な方法は、Javascriptを少し使用することだと思います。ここで例として使用するJavaScriptを見つけることができます http://kxip.in/js/background-moving.js

 // speed in milliseconds
var scrollSpeed = 70;

// set the default position
var current = 0;

// set the direction
var direction = 'h';

function bgscroll() {

  // 1 pixel row at a time
  current -= 1;

  // move the background with backgrond-position css properties
  $('div.background-image').css("backgroundPosition", (direction == 'h') ? current+"px 0" : "0 " + current+"px");
}

//Calls the scrolling function repeatedly
setInterval("bgscroll()", scrollSpeed);

ただし、これはおそらく機能しないので、単にコピーして貼り付けないでください。

0
user3274237

hTML5でMarqueeタグを使用できます。例は http://www.quackit.com/html/codes/html_Marquee_code.cfm で確認できます。

0
Atousa