jQuery プラグインを使うことで、高度なアニメーションや、魅力的なデザインを簡単に実現することができます。今回は Web サイトの表現をよりリッチなものにするテキスト系の jQuery プラグインを紹介します。
FitText
親要素のサイズによってフォントサイズをフレキシブルに変更できるプラグインです。デモサイトでは、画面のサイズの拡大・縮小によってフォントサイズが変更されることが確認できます。オプションでテキストの最小・最大サイズなどを設定することも可能です。
CircleType.js
テキストをカーブさせたり、円形にしたりできるプラグインです。RAIDUS を設定することができ、ウィンドウサイズによって動的に RADIUS を変化させることもできます。CircleType.js のファイルサイズは 2KB しかないので、非常に軽量なプラグインです。
No Vacancy
テキストにネオンサインのようなオシャレなエフェクトを付加することができるプラグインです。色や点滅のスピードなどを細かく調節することができます。ただし、アルファベットには使えますが、日本語の場合はうまく動作しないようです。
Simple Text Rotator
テキストをアニメーションさせながら入れ替えることができるプラグインです。要素にアニメーションを設定すれば、 HTML 側で入れ替えたい文字をカンマ区切りで設定するだけなので、非常に簡単に実装することができます。
textillate.js
テキストに様々な CSS3 アニメーションを簡単に適用することができるプラグインです。 デモサイトでテキストの表示や非表示時にする様々なアニメーションを試すことができます。
FONT-TO-WIDTH
テキストを親要素の中にきれいに調節してディスプレイしてくれるプラグインです。FitText.js とは異なり、テキストの大きさは変えずに、 width や weight が自動的に調節されて表現されます。
jQuery Burn
テキストに燃えているようなエフェクトを付加するプラグインです。オプションで火を大きくしたり、風を与えたりすることもでき、細かい調整も可能です。
BigText
bigtext の id をもつタグで囲んだ子要素のテキストを最大まで広げて表示してくれるプラグインです。デモサイトでは、テキストや幅などを指定して試してみることができます。簡単にオシャレなタイポグラフィを実現することができます。
jQuery Text Resizer
フォントサイズを大・中・小ように指定のものに切り替えられるようにできるプラグインです。jQuery Cookie plugin と同時に使うことで、選択したフォントサイズをブラウザに記憶させておくことも可能です。
jQuery Glow
テキストにグロー効果を付加するシンプルなプラグインです。デモサイトでは、テキストにマウスオーバーすることでグローアニメーションを試すことができます。
まとめ
今回はテキスト系の jQuery プラグインを紹介しました。中には依存関係が有りいくつかの JavaScript ファイルが必要な場合がありますので、注意して使用してください。
