リッチなタイポグラフィを実現するjQueryプラグイン10選

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

jQuery プラグインを使うことで、高度なアニメーションや、魅力的なデザインを簡単に実現することができます。今回は Web サイトの表現をよりリッチなものにするテキスト系の jQuery プラグインを紹介します。

FitText

親要素のサイズによってフォントサイズをフレキシブルに変更できるプラグインです。デモサイトでは、画面のサイズの拡大・縮小によってフォントサイズが変更されることが確認できます。オプションでテキストの最小・最大サイズなどを設定することも可能です。

fittext

DOWNLOAD / DEMO

CircleType.js

テキストをカーブさせたり、円形にしたりできるプラグインです。RAIDUS を設定することができ、ウィンドウサイズによって動的に RADIUS を変化させることもできます。CircleType.js のファイルサイズは 2KB しかないので、非常に軽量なプラグインです。

CircleType

DOWNLOADDEMO

No Vacancy

テキストにネオンサインのようなオシャレなエフェクトを付加することができるプラグインです。色や点滅のスピードなどを細かく調節することができます。ただし、アルファベットには使えますが、日本語の場合はうまく動作しないようです。

no_vacancy

DOWNLOAD / DEMO

Simple Text Rotator

テキストをアニメーションさせながら入れ替えることができるプラグインです。要素にアニメーションを設定すれば、 HTML 側で入れ替えたい文字をカンマ区切りで設定するだけなので、非常に簡単に実装することができます。

simple_text_rotator

DOWNLOADDEMO

textillate.js

テキストに様々な CSS3 アニメーションを簡単に適用することができるプラグインです。 デモサイトでテキストの表示や非表示時にする様々なアニメーションを試すことができます。

textillate

DOWNLOADDEMO

FONT-TO-WIDTH

テキストを親要素の中にきれいに調節してディスプレイしてくれるプラグインです。FitText.js とは異なり、テキストの大きさは変えずに、 width や weight が自動的に調節されて表現されます。

Font-To-Width

DOWNLOADDEMO

jQuery Burn

テキストに燃えているようなエフェクトを付加するプラグインです。オプションで火を大きくしたり、風を与えたりすることもでき、細かい調整も可能です。

jquery_burn

DOWNLOAD & DEMO

BigText

bigtext の id をもつタグで囲んだ子要素のテキストを最大まで広げて表示してくれるプラグインです。デモサイトでは、テキストや幅などを指定して試してみることができます。簡単にオシャレなタイポグラフィを実現することができます。

bigtext

DOWNLOAD / DEMO

jQuery Text Resizer

フォントサイズを大・中・小ように指定のものに切り替えられるようにできるプラグインです。jQuery Cookie plugin と同時に使うことで、選択したフォントサイズをブラウザに記憶させておくことも可能です。

jquery_text_resizer

DOWNLOAD / DEMO

jQuery Glow

テキストにグロー効果を付加するシンプルなプラグインです。デモサイトでは、テキストにマウスオーバーすることでグローアニメーションを試すことができます。

jquery_glow

DOWNLOAD / DEMO

まとめ

今回はテキスト系の jQuery プラグインを紹介しました。中には依存関係が有りいくつかの JavaScript ファイルが必要な場合がありますので、注意して使用してください。


イベント

2017/12/05(火)
Design Thinking Square