Letter Space In
このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。
指定した要素のテキストを変化させるアニメーションを実現するためのDynamicHTML(DOM+JavaScript)です。すべて１つの文字上に重ねたテキストを、徐々に引き延ばして読めるテキストにしています。スクリプトはscriptフォルダにあるものとして記述しています。
Sample
テキストが出てきます。このサンプルはクリックで再実行可能です。
<p id="lsin" style="font-size:20px; letter-spacing:-20px;">テキストが出てきます。</p>
ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。
スタイルシートであらかじめ文字サイズを指定し、文字サイズぶん文字間隔をマイナスにして最初の文字にすべてのテキストを重ねておいてください。
<SCRIPT type="text/javascript" src="script/lsin.js"></SCRIPT>
ここからスクリプトをファイルに保存して、<HEAD>～</HEAD>内に上のように記述してスクリプトを読み込ませます。
<BODY onload="letterSpaceIn('lsin',80);">
スクリプトは<BODY>のonload属性で実行します。最初のパラメータが指定したID名で、2番目のパラメータが処理タイミング（ミリ秒）となります。