[JS]テキストを揃えたり、文字間を調整したり、かっこいいアニメーションを適用したりするjQueryのプラグインのまとめ

テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連の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
文字のカーニングをスクリプトベースで設定できます。

top of page

Trackback

Comments

【JS】デザインを彩るJSの記事まとめ | HappyGoLucky

on 2012年10月28日

[...] [JS]テキストを揃えたり、文字間を調整したり、かっこいいアニメーションを適用したりするjQueryのプラグインのまとめ [...]

top of page

©2014 coliss