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. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  2. Sliiide

    JavaScript

    シンプルなスライディングメニューを実装できる「Sliiide」

    Sliiideはシンプルなスライディングメニューを実装することができる…

  3. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  4. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン19選のまとめ 2012/04 – 2012/0…

    2012年4月〜2012月7月までの当ブログで紹介したjQueryプラ…

  5. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  6. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP