[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