TAGS :,

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="https://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がもっと陽の目を見ることで
こういったプラグインを有効に使っていきたいものです。

ご参考までに。。。