忍者ブログ
14  13  12  11  10  9  8  7  6  5  4 
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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に戻り、再読み込みしてみてください。リンクの1つに効果をかけています。

PR
この記事にコメントする
ツイートボタンブログパーツ

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
ATOM(RSS)icon ATOM
RSS

myTwitter

ツイートボタンブログパーツ
gogoToRoTAN


Shopping

楽天市場
TV・新聞掲載商品
楽天ランキング
Yahoo!ショッピング
Yahoo!オークション

Amazon.co.jp
Amazon.co.jp ベストセラー
楽天ブックス
楽天ブックス ランキング

旅行

楽天トラベル
航空券(ANA/JAL等)
高速バス
Yahoo!トラベル
じゃらんnet

ブログ内検索
プロフィール
HN:
torotan
性別:
非公開
ブログパーツアクセスランキング
忍者ブログ [PR]