背景を徐々に色を変える方法は？

イメージの背景色が徐々に色を変えるようなWebページを作ろうとしています。私はJavascriptの何かの背景色を変更する方法を知っていますが、（フラッシュを使用せずに）それを「アニメート」する方法はわかりません。あなたの体のonloadハンドラで背景を徐々に色を変える方法は？

function animateBg() 
{ 
    myElement.style.backgroundColor = someNewValue; 
    setTimeout(animateBg, 20); // 20 milliseconds 
}

とanimateBg（）を呼び出し：

出典

2012-02-20 Isaiah Bugarin

CSSトランジションを使用して効果を得ることができます。 CSSのそれと

-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
transition: all 1s ease-in-out;

任意のスタイル値は変更が1秒で現在の新しい値にアニメーション化されていることに変更されるたびに：ちょうどJSから変更された要素にそのCSSコードを追加します。

最新のブラウザでのみ動作します。例を見てください：click

出典

2012-02-20 22:38:18 MarcinJuraszek

実際には本当にうまくいきました。私はちょうどJSの色のセットで配列をキャストし、数秒ごとにその配列からランダムな色を生成するように指示しました。ありがとう！ –

あなたはsetTimeout()機能を使用する場合があります。例えば、<body onload="animateBg()">。

出典

2012-02-20 22:30:32

ます。また、（同じ引数で） 'のsetInterval（）'関数を使用することができますanimateBg '中にあなた' animateBg（） 'タイマー（）'不要な "再アーミング" を行います（ 'setInterval（animateBg、20）'を呼び出すだけで、20ミリ秒ごとに呼び出される 'animateBg（）'関数を呼び出すことができます） –

どちらの方法でも、 'if'テストを追加して、（そして 'setInterval（）'で、あなたがそれをキャンセルできるようにタイマーIDへの参照を保持するために余分な変数が必要になりますし、 'setTimeout（）'はより良く動作する傾向があります。ユーザーが別のタブに切り替えてから後で戻ったときにどうなるかについて 'setInterval（）'）。 – nnnnnn

良い点。私はそれが何らかの理由で永遠のループアニメーションだったと推測しました。 –

私はJQuery color pluginを使ってみます。例here（デモをクリックしてください）を見て、彼らはあなたのことを正確に行うようです。ここで

出典

2012-02-20 22:39:35 mck

は、bodyタグの背景をアニメーション化する方法の例です：

function animateBg(i) { 
    document.body.style.backgroundColor = 'hsl(' + i + ', 100%, 50%)'; 

    setTimeout(function() { 
     animateBg(++i) 
    }, i); 
} 
animateBg(0);

HSLは、あなたも進/ RGBカラーとトリックを行うことができ、crossbrowserではないことに注意してください。

Jsfiddleリンク：http://jsfiddle.net/euthg/

出典

2012-02-20 23:03:51

背景を徐々に色を変える方法は？

答えて

関連する問題