Chameleon.js

JavaScript

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

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

Chameleon.js

デモ

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

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

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

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

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

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

Chameleon.js

関連記事

  1. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  2. no-image
  3. jQuery-ResizableColumns

    JavaScript

    テーブルのカラムをリサイズできる「jQuery-ResizableColumns」

    jQuery-ResizableColumnsは、テーブルのカラムをリ…

  4. ScrollPress

    JavaScript

    スムーズなアニメーションのスクロールトップ実装「ScrollPress」

    ScrollPressは、スムーズなアニメーションによるスクロールトッ…

  5. Flurry

    JavaScript

    Webページに雪を美しく降らせる冬にピッタリのjQueryプラグイン「Flurry」

    FlurryはWebページに雪を美しく降らせてくれるアニメーションを実…

最近の記事

  1. YAECA ワイドテーパードデニム 10-13WW
  2. ADR-3ML39シリーズ
  3. キュレル モイスチャーバーム
  4. FUJIFILM X-Pro3
  5. iPhone 11 ProとApple Watch Hermès

アーカイブ

PAGE TOP