文字ごとに細かいスタイルを指定したいときに使えるjQueryプラグイン『Lettering.js』
- November 1st, 2010
- Posted in jQuery関連 . 開発ツール・技術
- Write comment
サイトで文字や単語ごとにスタイルをびしっと決めたいときに使えるjQueryプラグインのご紹介。
このプラグインを使えば、文字ごとにspanタグを・・・という面倒な作業が不要になります。
ちょっとわかりにくいのでマークアップで説明してみましょう。たとえば次のようなテキストに一文字ごとのスタイルを指定したいとしましょう。
<h1 class="fancy_title">Some Title</h1>
そんなときはこのプラグインを読み込んだ後に、次のように実行します。
$(document).ready(function() {
$(".fancy_title").lettering();
});
すると元のテキストが次のように展開されます。
<h1 class="fancy_title"> <span class="char1">S</span> <span class="char2">o</span> <span class="char3">m</span> <span class="char4">e</span> <span class="char5"></span> <span class="char6">T</span> <span class="char7">i</span> <span class="char8">t</span> <span class="char9">l</span> <span class="char10">e</span> </h1>
あとは.char1、.char2などのスタイルをCSSに記述するだけです。なお、オプションで「単語ごと」「行ごと」という指定もできますよ。
いちいち文字ごとにスタイル指定するの面倒－、という方はいかがでしょ。ダウンロード＆詳細は以下からどうぞ。
» Lettering.js – A jQuery plugin for radical web typography.
No comments yet.