CSS3からテキストを装飾するプロパティが増え、
画像を使わずにテキストの見た目を豪華に彩ることが可能となってきますが、
そんなテキスト装飾に使えそうなjQueryプラグイン「Lettering.JS」が今後役立ちそうだったのでご紹介。

Lettering.js – A jQuery plugin for radical web typography.


Lettering.js – A jQuery plugin for radical web typography.
ダウンロードはこちら

この「Lettering.JS」jQueryプラグインを使用することで、Webページ上のテキスト(英字のみ)に対して、
一文字ずつ個別の<span>タグを付加し、一文字ずつ別々のCSSを指定することができるようになります。

Exampleページを例に挙げ、「RAINBOW」の文字に対して
この「Lettering.JS」jQueryプラグインを実行させるパターンを紹介してみます。
下記の様な構成になります。

まずはHTMLソース。

◆HTML
<div id="demo1">
<h1>Rainbow</h1>
</div>

続いて「Rainbow」のテキストに対して、
SCRIPTを実行させます。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.lettering.js"></script>

<script>
$(document).ready(function() {
	$("#demo1 h1").lettering();
});
</script>

こうすることで、実際に生成されるHTMLソースは以下の様になります。

◆HTML
<div id="demo1">
<h1>
<span class="char1">R</span>
<span class="char2">a</span>
<span class="char3">i</span>
<span class="char4">n</span>
<span class="char5">b</span>
<span class="char6">o</span>
<span class="char7">w</span>
</h1>
</div>

個別にクラスが付与されることで、
それぞれ一文字ずつ個別の指定を加えられるようになります。

HTMLソースを汚すことなく指定を加えられるところがとても魅力的です。

プラグイン紹介ページにはこの「Lettering.JS」を使って
サイト全体を彩っている参考サイトが多々紹介されています。
La Galerie

今後CSS3がもっと陽の目を見ることで
こういったプラグインを有効に使っていきたいものです。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

ページ上のテキストを一文字ずつ個別に装飾するのに便利なjQueryプラグイン「Lettering.JS」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner