Chameleon.js

JavaScript

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

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

Chameleon.js

デモ

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

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

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

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

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

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

Chameleon.js

WebGradientsCSSやPNG形式に対応した180種類のグラデーションを活用できる「WebGradients」前のページ

プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」次のページTyped.js

関連記事

  1. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  2. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  3. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

  4. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  5. lightGallery
  6. Tabslet

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP