背景色をオフセット位置に移動する

Question

jQueryとjQuery.Colorsを使用して、フレームのdivをスクロールしながら、背景の色をオフセット位置に関連付ける方法を考え出しています。あなたがここに私の例を見ることができます

： 現在http://coreycapetillo.com/tests/colors/index.html

をオフセット位置は一定数の範囲になったとき、私は、背景色の変更を持っています。しかし、私は代わりに、より有機的にシフトさせることができ、単色のグラデーション効果を模倣できるのだろうかと思います。

最も簡単な回避策は、4つの異なる背景色を持つ4つの空のdivがあると考えました。次に、いくつかの基本的な計算を使用して、offset（）の左の数値に不透明度（divごとに異なるオフセットを使用）を設定します。

私は空のDIVがより少なく、より滑らかなものを必要とするものを探しています。私がstackOverflowに投稿したのはこれが初めてです。私は、必要な方向へのガイダンスを得るために十分な情報を提供してくれることを願っています。

Answer 1

これはまさに「グラジエント」エフェクトではないかもしれませんが、オフセットを使って1つのdivにクラスを設定することはできません（例：100px、クラスを "green"、500px set class "青 "など）、そしてCSS遷移を使用してフェージングを処理しますか？例を参照してください。 http://jsfiddle.net/juanojeda/bKRuQ/

この例ではクリックを使用していますが、原則はオフセットイベントをリッスンするのと同じです。

Answer 2

1つの方法は、色（赤、緑、青）が0-255の範囲にあるRGBカラーモデルを使用することです。これらの数値を16進数に変換すると、典型的な#3399AAのカラーフォーマットになります。

まず、使用する2色（赤と緑、または緑と青など）を選択します。その後は、JavaScriptを使用して色オフセット（x、y）をマッピングすることができる：

var red = Math.floor(x/divWidth * 255); 
var green = Math.floor(y/divHeight * 255); 
color = "#" + red.toString(16) + green.toString(16) + "99"; 

が異なる効果を達成するには、HSVカラーモデル（色相、彩度および値）を使用することができます。このモデルでは、値（光度）を一定に保つことができます。これはおそらくRGBより優れています。 thisが必要です。これは、機能がhslToRgbの場合、コードは次のようになります。

var hue = Math.floor(x/divWidth * 255); 
var sat = Math.floor(y/divHeight * 255); 
color = hslToRgb(hue, sat, 255); 
color = "#" + color[0].toString(16) + color[1].toString(16) + color[2].toString(16);