THE HAM MEDIA BLOG

jQueryのanimateで背景色や文字色の変化をできるようにするプラグイン『Color Animations』

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
jquery
plugin
javascript
COLOR

背景色や文字色の変化をできるようにする

はっ!?内容とリード文があってない!?
ってことでいつのまにやら修正しておく。

背景色とか文字色とか、色関係をアニメーションさせようと思っても、
どうやらjQuery単体ではアニメーションできない。

なぜ!?

とまぁ、背景とか色関係をアニメーションで使いたいなと思ったので、
色関係を扱えるようにするプラグインを見つけたので、メモエントリーしておく。

jQueryだけだと背景色と文字色はアニメーションできない

jQuery単体だけだと、背景色や文字色のアニメーションができないのです。
理由は下記の通りのようです。

数値型の値をとらない属性(backgroundColorなど)には、animate関数は対応していません。
animate - jQuery 1.2.6 日本語リファレンス

つまり、アニメーションさせるには変化させるための数値が必要。
ところが色の値などはデフォルトの状態では数値化処理できないので、
色の変化をさせることができないということらしいです。

デフォルト状態ではできないのですが、
このアニメーションを可能にするプラグインが存在します。

Color Animations (jQuery Plugins)

このプラグインを使う事で、色を数値としてみなして、変化させることができるのです。

色の書き方で、white(白)とかblock(黒)とか書いているとわからないと思うのですが、
#ffffff(白)や#000000(黒)などのように、
0〜9とa〜fまでを使った16進数で表すことができるのです。

この6桁の数値をを2桁事に区切って10進数にすると0〜255。
例えばblue(青)なら16進数で#0000ff、10進数にすると[0,0,255]になります。

今回のプラグインでは色をこの0〜255にすることで
アニメーション可能にしているという仕組みになっているようです。

使ってみる

いつものよう使ってみました。

■ HTML

<button class="preview01">クリック</button>
<p class="preview01">デモデキスト</p>
<button class="preview02">クリック</button>
<p class="preview02">デモデキスト</p>
<button class="preview03">クリック</button>
<p class="preview03">デモデキスト</p>

■ JavaScript

(function($){
  $(function(){
    $("button.preview01").click(function(){
      $(".preview p.preview01").animate( {
        backgroundColor: '#ff00ff',
        color: '#000000'
      }, 1000)
      .animate( {
        backgroundColor: '#0000ff',
        color: '#ffffff'
      }, 1000);
    });
    $("button.preview02").click(function(){
      $(".preview p.preview02").animate( {
        color: '#000000'}, 1000)
        .animate( { color: '#0000ff'}, 1000)
        .animate( { color: '#ff00ff'}, 1000)
        .animate( { color: '#ff0000'}, 1000)
        .animate( { color: '#00ff00'}, 1000)
        .animate( { color: '#000000'}, 1000);
    });
    $("button.preview03").click(function(){
      $(".preview p.preview03").animate( {
        backgroundColor: '#000000'}, 1000)
        .animate( { backgroundColor: '#0000ff'}, 1000)
        .animate( { backgroundColor: '#ff00ff'}, 1000)
        .animate( { backgroundColor: '#ff0000'}, 1000)
        .animate( { backgroundColor: '#00ff00'}, 1000)
        .animate( { backgroundColor: '#000000'}, 1000);
    });
  });
})(jQuery);

■ プレビュー

デモデキスト

デモデキスト

デモデキスト

これを使う事で、背景の変化や文字のアニメーションなど
多彩な変化をさせることができるようになるので、
押さえておきたいプラグインではないでしょうか。

この記事へのコメント
プレビューが変化されねーよ
Posted by 言xTHEancer at 2014年12月11日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/107837321
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

jQuery Color Animations 色を動的に変化させ、目を引く演出を!
Excerpt: jQuery Color Animationsを使えば、文字色や背景色を動的に変化させることができます。ナビゲーションメニューや、強調させたいところに使い、ワンランク上の鮮やかな楽しい効果を簡単に演出..
Weblog: gogoLounge
Tracked: 2009-12-20 00:22

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。