[JS]HTMLファイルを汚さずに細かい設定でspanを挿入できるスクリプト -Lettering.JS
Post on:2010年9月16日
sponsors
h1, p などで実装したテキスト箇所にspanを自動で挿入できるスクリプトを紹介します。
[ad#ad-2]
各spanにカラー指定を行うと、下記のようなこともHTMLを汚さずに可能です。
追加したspanに個別にカラー指定したキャプチャ
Lettring.JSの実装
実装は簡単です。スクリプトを外部ファイルとして指定し、下記のように記述します。
HTML
|
1 |
<h1 class="lettering">Rainbow</h1> |
JavaScript
|
1 2 3 4 5 6 7 |
<script src="jquery-1.4.2.min.js"></script> <script src="jquery.lettering.min.js"></script> <script> $(document).ready(function() { $(".lettering").lettering(); }); </script> |
spanを挿入する単位は一文字ずつ、単語単位（英語のみ）、一行単位（br）に対応しています。
また、スクリプトのデモは、ダウンロードファイルに付属しています。
Lettering.jsのダウンロードページ
sponsors
