[JS]テキストを揃えたり、文字間を調整したり、かっこいいアニメーションを適用したりするjQueryのプラグインのまとめ
Post on:2012年10月11日
テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。

Lettering.js
HTMLは汚さずに一文字ずつspanを挿入し、スタイルを設定できます。
下記に紹介する他のスクリプトのいくつかにも利用されています。

FitText
親要素のサイズに合わせてフォントサイズをフィットさせます。

slabText
ブラウザのサイズに合わせて、テキストをぴたっと揃えます。

jqIsoText
テキストのサイズを少しずつ変更して配置します。

Arctext.js
テキストをサークル状に配置します。

Bacon
テキストをベジエ曲線に沿って配置します。

dotdotdot
コンテンツからはみ出るテキストを「...」に置き換えます。

jMetronome
縦のリズムを維持したまま、テキストを配置します。

Baseline.js
ベースラインに揃えてテキストや画像を配置します。

Lettering Animate
Lettering.jsを使って、テキストにさまざまなアニメーションを与えます。

Typist
行送りや一時停止、タイプスピードの緩急も調整できる、テキストを一文字ずつタイプライターのようにアニメーションで表示します。

Text Effects
テキストを一旦ごちゃまぜにして元通りにしたり、ずらしたり一文字ずつ表示したりします。

Airport
テキストを空港の案内板のようにシャカシャカ表示します。

Textualizer
テキストにフェードやスライドのアニメーションを与えます。

Approach
テキストにカーソルが近づくほど、エフェクトが適用されます。

Shuffle Letters
テキストを指定した文字列でシャッフルして表示します。

jLensMagnify
ホバーした文字列や文字をレイアウトを崩さずに拡大表示します。

moatext
テキストのウェーブやレンズ・透過などのエフェクトをつけ「もあもあ」させます。

dynamo
テキストの一部をこっそりと変更します。

Kern.js
文字間の調整(カーニング)をし、生成したCSSはLettering.jsと一緒に使用します。

TypeButter
文字のカーニングをスクリプトベースで設定できます。
sponsors