文字色のアニメーションについて

新規サイトを作るにあたり、 テキストリンクのロールオーバーには、 文字色アニメーションを使おうと思います。

文字色アニメーションを実装するための方法をざっと調べたところ、 以下、2種類を発見。

(1)CSS3 の transition プロパティを使って実装
(2)Jquery の プラグインを使って実装

(1)について、
【デモ】
■文字色アニメーション(CSS3版)
http://dog-ears.net/140715_color_animation01/index01.html
シンプルかつきれいにいけるものの、対応ブラウザが webkit系(GoogleChrome、Safari等) に、限られるとのこと。 ということで、パス。

【参考】
■CSS3リファレンス
http://www.htmq.com/css3/transition.shtml
■css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
http://kachibito.net/web-design/css3-transition-sample.html

次、(2)Jquery の プラグインを使う場合。
プラグインにもいくつかあるもよう。
取り急ぎ、「Jquery Color Plugin」を使ってみる。

【デモ】
■文字色アニメーション(Jquery Color Plugin版)
http://dog-ears.net/140715_color_animation01/index02.html

うーん。Jqueryのバージョン1.3.2だと動くんだけど、 1.9にしたら、動かなくなった・・・ [追記]1.9にしたら、hoverファンクション自体動いてないみたいでした。1で指定したところ、問題なく動作。

【参考】
■文字色や背景色をじんわり変える「Jquery Color Plugin」
http://otani-webs.com/lab/javascript/101120.html

[追伸メモ] あとで調べること
・Jqueryのバージョン管理をどうするか。
・プラグインのライセンスについて

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です