これでもう、グラデーションにできてしまう濃淡の縞に困らない！バンディングをおさえるJavaScriptライブラリ
Post on:2019年9月17日
sponsors
制作時の最適なモニターや最適な照明環境で美しいグラデーションを作成しても、ビジターの環境ではバンディングと呼ばれる濃淡の縞ができてしまうかもしれません。
Webページの背景などに使用するグラデーションにできてしまうバンディングをおさえ、滑らかに表示するためのJavaScriptライブラリを紹介します。
写真やイラストなど画像のグラデーションで発生するバンディングをおさえたい場合は、以前の記事をご覧ください。
グラデーションのバンディングとは
Webページの背景にグラデーションを使用した場合、バンディングと呼ばれる濃淡の縞ができてしまうことがあります。
例えば、#112233から#223344の線形グラデーションを見てましょう。
#112233から#223344の線形グラデーション
表示しているモニターや照明の条件によって、バンディングが顕著になったり、目立たなくなることがあります。バンディングを誇張するために、輝度レベルを調整した画像を用意しました。
バンディングが発生したグラデーション
バンディングが目立つようになると、デザインは台無しです。
バンディングの解決方法
このバンディングには、簡単な解決方法があります。
画像に少量のノイズを加えることで、一部のピクセルが少し明るくなり、一部のピクセルが少し暗くなります。ノイズの量と明暗の強さを変えることで、バンディングを視覚的に抑えることができます。
少量のノイズを加えたグラデーション
先ほどと同様に誇張した画像を用意しました。
少量のノイズを加えたグラデーション（誇張版）
最初のグラデーションとノイズを加えたグラデーションを並べたので、比べてみてください。
最初とノイズを加えたグラデーションの比較
js-noisy-gradientの使い方
js-noisy-gradientは画像のサイズ・グラデーションの構成を取得し、平滑化されたグラデーションを生成します。
- グラデーションは、#rrggbb形式で指定された色です。
- グラデーションの停止は、等間隔です。
- 関数名ごとに、グラデーションは垂直です。
- IEは、サポート外です。
グラデーションには、ピュアホワイト・ピュアブラックのピクセルをランダムな透明度でオーバーレイすることにより、明るくしたり暗くしたりしてノイズを加えます。
下記のように記述します。
|
1 2 3 |
var nvg = new NoisyVerticalGradient(50, 400, ['#112233', '#223344'] ); var png = nvg.render_png(); document.getElementById('xyz').style.backgroundImage = png; |
ターゲット要素のDOM/CSSから自動的にwidth, height, stopsの引数を抽出するためのコードを使用して単純化できます。
下記のデモページでは、非常に暗いグラデーションを美しく表示しています。
sponsors
