[JS]テキストを揃えたり、文字間を調整したり、かっこいいアニメーションを適用したりするjQueryのプラグインのまとめ
Post on:2012年10月11日
テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-01.png)
Lettering.js
HTMLは汚さずに一文字ずつspanを挿入し、スタイルを設定できます。
下記に紹介する他のスクリプトのいくつかにも利用されています。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-02.png)
FitText
親要素のサイズに合わせてフォントサイズをフィットさせます。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-03.png)
slabText
ブラウザのサイズに合わせて、テキストをぴたっと揃えます。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-06.png)
jqIsoText
テキストのサイズを少しずつ変更して配置します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-05.png)
Arctext.js
テキストをサークル状に配置します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-17.png)
Bacon
テキストをベジエ曲線に沿って配置します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-18.png)
dotdotdot
コンテンツからはみ出るテキストを「...」に置き換えます。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-04.png)
jMetronome
縦のリズムを維持したまま、テキストを配置します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-21.png)
Baseline.js
ベースラインに揃えてテキストや画像を配置します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-19.png)
Lettering Animate
Lettering.jsを使って、テキストにさまざまなアニメーションを与えます。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-08.png)
Typist
行送りや一時停止、タイプスピードの緩急も調整できる、テキストを一文字ずつタイプライターのようにアニメーションで表示します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-09.png)
Text Effects
テキストを一旦ごちゃまぜにして元通りにしたり、ずらしたり一文字ずつ表示したりします。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-10.png)
Airport
テキストを空港の案内板のようにシャカシャカ表示します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-11.png)
Textualizer
テキストにフェードやスライドのアニメーションを与えます。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-12.png)
Approach
テキストにカーソルが近づくほど、エフェクトが適用されます。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-13.png)
Shuffle Letters
テキストを指定した文字列でシャッフルして表示します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-14.png)
jLensMagnify
ホバーした文字列や文字をレイアウトを崩さずに拡大表示します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-15.png)
moatext
テキストのウェーブやレンズ・透過などのエフェクトをつけ「もあもあ」させます。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-16.png)
dynamo
テキストの一部をこっそりと変更します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-07.png)
Kern.js
文字間の調整(カーニング)をし、生成したCSSはLettering.jsと一緒に使用します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012101001-20.png)
TypeButter
文字のカーニングをスクリプトベースで設定できます。
sponsors