文字色のアニメーションについて
新規サイトを作るにあたり、
テキストリンクのロールオーバーには、
文字色アニメーションを使おうと思います。
文字色アニメーションを実装するための方法をざっと調べたところ、
以下、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のバージョン管理をどうするか。
・プラグインのライセンスについて
Discussion
New Comments
No comments yet. Be the first one!