jQuery Color Animations 色を動的に変化させ、目を引く演出を！

jQuery Color Animationsを使えば、文字色や背景色を動的に変化させることができます。ナビゲーションメニューや、強調させたいところに使い、ワンランク上の鮮やかな楽しい効果を簡単に演出できます。

jQuery Color Animations

通常、jQuery標準エフェクトのanimateでは、cssで、数字に対応したwidthやheight等にしかアニメーション効果がありません。しかし、 jQuery Color Animationsのプラグインを入れることで、色の変化もanimateで可能になります。つまり、文字色や背景色を動的かつ連続的に変化させることができます。

jquery.color.jsを、headで読み込むか、jQueryのソースの最後に追加します。
JavaScriptのソース内では、普通にanimateを使う要領で記述します。

  $('#colorchange *')
      .animate( { color: '#f00'}, 1000)
      .animate( { color: '#0f0'}, 1000)
      .animate( { color: '#00f'}, 1000)
      .animate( { backgroundColor: '#f00'}, 1000)
      .animate( { backgroundColor: '#0f0'}, 1000)
      .animate( { backgroundColor: '#00f'}, 1000);

色指定は、#rrggbbや、#rgbや, buleやred等、主な名前(ソース内に定義されています)でも使えます。使用上の注意としては、backgroundColorを使う場合、効果をかけたい要素のスタイルに、あらかじめbackgrand-colorが設定されていないと効きません。

「THE HAM MEDIA」のjQueryのanimateで背景色や文字色の変化をできるようにするプラグイン『Color Animations』のサイトでは、とても詳しく説明されており、デモも確認する事ができます。こちらのデモでは、ボタンクリックをトリガーに、文字色や文字背景色に変化を与えています。

また、Playing with jQuery Color Plugin and Color Animation | Desizn Tech の英語サイトでは、オンマウス（マウスオーバー）で、文字の背景色が様々な色に変化するデモを掲載しています。サイト内の「View Demo」で確認できます。さらに、「Download jQuery Color Animated Navigation」から、デモのコードを一式ダウンロードできます。

私は、このブログの上部で、サイトを読み込んだ時に起動するようにしています。一番Topに戻り、再読み込みしてみてください。リンクの１つに効果をかけています。