Chameleon.js

JavaScript

画像を元に自動でコンテンツに色付けしたりカラーコードを取得したりできる「Chameleon.js」

Chameleon.jsは、指定した画像を元に自動でコンテンツに色付けしたり、その画像からカラーコードを取得したりすることができるjQueryプラグインです。さまざまなパラメーターで色をソートすることもできます。

Chameleon.js

デモ

デモページにある「RUN QUICK DEMO」ボタンをクリックすると、コンテンツが表示されます。いくつかの丸い画像が用意されていて、いずれかをクリックするとその領域のコンテンツの色がその画像を元にした色に切り替わります。画像の下にはその画像に使われているカラーコードも表示されています。

画像を選択するだけで、一瞬でコンテンツがその画像のような色合いになるので、画像とコンテンツの色に統一感を出したい場合にはとても便利ですね。

また、画像からピンポイントでカラーコードを取得できるところもグッドです。画像に使われているカラーコードを知りたい時なんかにもよさそうですね。

下へスクロールしていくと、各機能による詳しい実装方法やデモが用意されています。画像を元にコンテンツの色を自動で決めるやり方やカラーコードを取得する方法、またはカラーをソートする場合など、いろんな機能があります。

カスタマイズも可能で、多様なセッティンができるので、気になる人はぜひチェックしてみてください。

というわけで、画像から自動でコンテンツに色付けしたりカラーコードを取得したりできる便利なjQueryプラグイン「Chameleon.js」のご紹介でした。

Chameleon.js

関連記事

  1. PgwSlider

    JavaScript

    レスポンシブで軽量なスライダーを実装できるjQueryプラグイン「PgwSlider」

    PgwSliderというjQueryプラグインを使えばレスポンシブで軽…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり…

  3. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

  4. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  5. Tip

    JavaScript

    シンプルなUIで使いやすいツールチップ実装「Tip」

    TipはシンプルなUIによる使いやすいツールチップを実装することができ…

最近の記事

  1. SF-G64T
  2. USB Type-C搭載ドッキングステーション
  3. RX100M6

Facebookページ

PAGE TOP