リッチなタイポグラフィを実現するjQueryプラグイン10選
jQuery プラグインを使うことで、高度なアニメーションや、魅力的なデザインを簡単に実現することができます。今回は Web サイトの表現をよりリッチなものにするテキスト系の jQuery プラグインを紹介します。 FitText 親要素のサイズによってフォントサイズをフレキシブルに変更できるプラグインです。デモサイトでは、画面のサイズの拡大・縮小によってフォントサイズが変更されることが確認できます。オプションでテキストの最小・最大サイズなどを設定することも可能です。 DOWNLOAD / DEMO CircleType.js テキストをカーブさせたり、円形にしたりできるプラグインです。RAIDUS を設定することができ、ウィンドウサイズによって動的に RADIUS を変化させることもできます。CircleType.js のファイルサイズは 2KB しかないので、非常に軽量なプラグインです
[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js
demo 5 一行ごとにさまざまなアニメーションで表示します。 「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。 <head> ... <script src="build/lining.min.js"></script> <script src="build/lining.effect.min.js"></script> </head> Step 2: HTML 適用する要素に「data-lining」を加えます。 <p class="poem" data-lining>洋酒といえば、誰でも
![[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/94a5e0fe3568ecb41b259e96c1bc62f0c1f09601/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112501-01.png)
[JS]画像を使わずに、テキストをかわいくサークル状に配置するスクリプト -CircleType
幅780pxで表示 CircleTypeの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト、Lettering.jsを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/lettering.js"></script> <script type="text/javascript" src="js/circletype.min.js"></script> FitText.jsを併用すると、表示サイズに合わせてテキストのサイズを変更することもできます。 Step 2: HTML HTMLはシンプル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
