Reshader

JavaScript

カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」

Reshaderは、カラーの濃淡を得ることができる便利なJavaScriptライブラリです。指定した任意のカラー値を基準にして、そのカラーより薄い色から濃い色までのカラー値を取得することが可能です。オプションも用意されているので、カスタマイズ性も高いライブラリに仕上がっています。

Reshader

デモ

Usageという項目がある場所に、カラーコード(hex)を入力するボックスが用意されています。デモページ読み込み時には「#6EEB83」という値が指定されていて、その下には指定したカラーコードを基準にして作られた濃淡の異なるカラーとカラーコードのリストが表示されています。

ボックス内に好きなカラーコードを入力すると、リアルタイムで反映されます。特定の色を元に濃淡の異なるカラーコードを取得したい場合にはとても役立つ機能ですね。

また、APIではcolorとoptionsのセッティングができるようになっています。colorには先ほどのhexのほか、rgbやhslでの指定も可能です。

optionsには、numberOfVariations、contrastRatio、outputModel、shouldIgnoreRepeated、shouldIgnoreWhites、shouldIgnoreBlacksといった項目があります。

多彩なカスタマイズを施せるのも、このJSライブラリの魅力になっています。

Reshader

関連記事

  1. Stackbox.js

    JavaScript

    プルプル震えるモーダルボックスを実装できるjQueryプラグイン「Stackbox.js」

    Stackbox.jsというjQueryプラグインを使えば、プルプル震…

  2. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  3. cubeTransition.js

    JavaScript

    3Dキューブのようなスライダーを実装できる「cubeTransition.js」

    cubeTransition.jsは、CSS 3DトランスフォームとC…

  4. NO IMAGE

    JavaScript

    フェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」

    Prrple Sliderはフェードアニメーションやスライド、ループ、…

  5. Responsive jQuery Pop Up Gallery
  6. Before and After image script

最近の記事

  1. メリーストロベリーケーキフラペチーノ
  2. 赤いなつめ

アーカイブ

PAGE TOP