動的な虹色の背景を作成する方法

革新的なストアthinkgeek.comのサイトで、奇妙な効果に遭遇しました-虹色の背景（スクロールホイールを動かすのに必要なキャンディーを見るため）。 非常に簡単に作られましたが、私は初めて同様の手法に出会いました。











1.背景が透明な2色画像には、画面上の特定の位置が割り当てられます。 たとえば、画面の下端にある黒いロボットと灰色のゾンビ！







2.背景も黒と灰色で選択され、灰色から黒への滑らかな垂直方向の遷移があります。 マウスでスクロールすると、背景がゾンビやロボットとともに写真の下に移動します。 画像がグレーの上に浮かぶとき、グレーのディテールが背景にマージされます。 黒の上に浮かぶと、黒のディテールが背景にマージされます。 両方の色が見える中間状態もあります-最も興味深い効果を生み出します。







ホログラムのようなものになります。

ここに例があり、もちろんthinkgeek.com自体にもあります。



更新： pvasiliは別の例を促しました。 残念ながら、オリジナルは入手できません。 再構築はここにあります （例は完全に復元されておらず、海との十分なネイティブ画像がありません）

更新2： Sir_Michaelは、同じトリックが使用されているサイトwww.webleeddesign.comに注目しましたが、マルチカラーではなく、部分的に透明な背景を使用しています。