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

tsorterテーブルにソート(並べ替え)機能を実装できる「tsorter」前のページ

シンプルで美しいレスポンシブ対応のパララックス実装「JQuery Background Image Scroll」次のページno-image

関連記事

  1. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  2. Notyf

    JavaScript

    シンプルでレスポンシブ対応のカッコイイ通知を表示できる「Notyf」

    Notyfはシンプルでレスポンシブに対応したカッコイイ通知を表示させる…

  3. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  4. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

  5. no-image

    JavaScript

    インタラクティブなツリー機能を実装できる「jstree」

    jstreeはインタラクティブなツリー機能を実装できるjQueryプラ…

  6. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP