jQueryでテキストにエフェクトをかけたりアニメーションさせたりするプラグイン集
2009年11月18日-![はてなブックマーク](http://b.hatena.ne.jp/entry/image///phpspot.org/blog/archives/2009/11/jquery_35.html)
スポンサード リンク
jQueryでテキストにエフェクトをかけたりアニメーションさせたりするプラグイン集が色々まとまったエントリが公開されており、それぞれ便利に使えそうです。
テキストエフェクト
画像を使わずにJavaScriptやCSSを駆使してテキストにエフェクトを加えるものが色々。
FontEffect jQuery Plugin
アウトラインや影、グラデーション効果をJavaScriptでかけることが可能。
![](http://phpspot.net/php/webimager/admin3/data/dc77ff5a9cc2958c19d4b418250c4b66.png)
jQuery Label Effects
文字を盛り上がりや影付きにしたりできます
![](http://phpspot.net/php/webimager/admin3/data/58dc1e9950e5cc1c706dc9a491869c1c.png)
Text-shadow in IE with jQuery
IEでテキストを影付きにする例
![](http://phpspot.net/php/webimager/admin3/data/724bdd729423c64a4441164c66ffd39d.png)
Codename Rainbows
グラデーションなど様々なテキストエフェクトをかけることが可能
![](http://phpspot.net/php/webimager/admin3/data/7a4b62abdc29d875f26d83204046aea4.png)
Textgrad – A jQuery Text Gradient Plugin
テキストにグラデーション効果を自由自在に与える
![](http://phpspot.net/php/webimager/admin3/data/8f198aca030e3c9ceb3f291ff712f9ff.png)
Fade colors using jQuery
テキストにフェーディング機能をかけることが可能
![](http://phpspot.net/php/webimager/admin3/data/0d8a4abe234993fc43e13ff95e9f6ae8.png)
アニメーション
テキストもアニメーションさせると色々な印象を与えることができますね。驚きの効果を楽に実装するためのライブラリなどが掲載されています。
Airport – Information Board Text Effect
空港の電光掲示板っぽいアニメーションをテキストに与えることが可能
![](http://phpspot.net/php/webimager/admin3/data/4b8d21ac7a1f6cc4b16f81a775be384c.png)
jQuery Grab Bag – Text Effects Plugin
テキストにタイプライティング効果を付けたり、徐々に読めるテキストに変わっていくような機能を付けられます
![](http://phpspot.net/php/webimager/admin3/data/f45324df5245d00d7fd84c4e8aaed60b.png)
Playing with jQuery Color Plugin and Color Animation
テキストの背景を自由にアニメーションさせる
![](http://phpspot.net/php/webimager/admin3/data/1d5a1e130faa16e0bd23e1d5939725cd.png)
3D Flying Text in jQuery
テキストを3Dアニメーションさせる
![](http://phpspot.net/php/webimager/admin3/data/b5af6099ed2e7cc35faadb2707c1486d.png)
という感じでテキストだけですが驚くべきエフェクトを与えられるものですね。
リンク先を見るには以下のエントリを参照してください。
20 Easy to Use jQuery Text Effects and Animations : Speckyboy Design Magazine
テキストエフェクト
画像を使わずにJavaScriptやCSSを駆使してテキストにエフェクトを加えるものが色々。
FontEffect jQuery Plugin
アウトラインや影、グラデーション効果をJavaScriptでかけることが可能。
![](http://phpspot.net/php/webimager/admin3/data/dc77ff5a9cc2958c19d4b418250c4b66.png)
jQuery Label Effects
文字を盛り上がりや影付きにしたりできます
![](http://phpspot.net/php/webimager/admin3/data/58dc1e9950e5cc1c706dc9a491869c1c.png)
Text-shadow in IE with jQuery
IEでテキストを影付きにする例
![](http://phpspot.net/php/webimager/admin3/data/724bdd729423c64a4441164c66ffd39d.png)
Codename Rainbows
グラデーションなど様々なテキストエフェクトをかけることが可能
![](http://phpspot.net/php/webimager/admin3/data/7a4b62abdc29d875f26d83204046aea4.png)
Textgrad – A jQuery Text Gradient Plugin
テキストにグラデーション効果を自由自在に与える
![](http://phpspot.net/php/webimager/admin3/data/8f198aca030e3c9ceb3f291ff712f9ff.png)
Fade colors using jQuery
テキストにフェーディング機能をかけることが可能
![](http://phpspot.net/php/webimager/admin3/data/0d8a4abe234993fc43e13ff95e9f6ae8.png)
アニメーション
テキストもアニメーションさせると色々な印象を与えることができますね。驚きの効果を楽に実装するためのライブラリなどが掲載されています。
Airport – Information Board Text Effect
空港の電光掲示板っぽいアニメーションをテキストに与えることが可能
![](http://phpspot.net/php/webimager/admin3/data/4b8d21ac7a1f6cc4b16f81a775be384c.png)
jQuery Grab Bag – Text Effects Plugin
テキストにタイプライティング効果を付けたり、徐々に読めるテキストに変わっていくような機能を付けられます
![](http://phpspot.net/php/webimager/admin3/data/f45324df5245d00d7fd84c4e8aaed60b.png)
Playing with jQuery Color Plugin and Color Animation
テキストの背景を自由にアニメーションさせる
![](http://phpspot.net/php/webimager/admin3/data/1d5a1e130faa16e0bd23e1d5939725cd.png)
3D Flying Text in jQuery
テキストを3Dアニメーションさせる
![](http://phpspot.net/php/webimager/admin3/data/b5af6099ed2e7cc35faadb2707c1486d.png)
という感じでテキストだけですが驚くべきエフェクトを与えられるものですね。
リンク先を見るには以下のエントリを参照してください。
20 Easy to Use jQuery Text Effects and Animations : Speckyboy Design Magazine
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 個性的な明朝フリーフォント「築豊初号明朝OFL」
- CSSで太陽が差し込むようなアニメーション実装
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 過去のエントリ