jQueryで文字列を１文字ずつ表示するスクリプト（複数行対応） - SRC遊んだり書いたり。時々プログラミング

こんにちは！
今日はjQueryを使い、ゲームのように文字列を1文字ずつ表示するスクリプトをご紹介します。

デモ

使い方

jQueryの読み込み

jQueryを使用するので、Google AJAX Libraries APIからjQueryを読み込みます。
HTMLの<head>内に次の行を追加してください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

JavaScriptをコピペ

次のコードを<head>内の最後の行にコピー＆ペーストして下さい。

<script type="text/javascript">
    $(document).ready(function(){
        var DELAY_SPEED = 100;//文字が流れる速さ
        var FADE_SPEED = 500;//文字のフェードインの速さ
        var str = [];
        $('.fadein > span').each(function(i){//セレクタで指定した要素すべて
            $(this).css('opacity','1');//行を不透明にする
            str[i] = $(this).text();//元のテキストをコピーし
            $(this).text('');//テキストを消す
            var no = i;
            var self = this;
            var interval = setInterval(function(){
                if(no == 0 || $('.fadein > span').eq(no - 1).children('span:last').css('opacity') == 1){//最初の要素または前の要素が全文字表示された時
                    clearInterval(interval);
                    for (var j = 0; j < str[no].length; j++) {
                        $(self).append('<span>'+str[no].substr(j, 1)+'</span>'); 
                        $(self).children('span:last').delay(DELAY_SPEED * j).animate({opacity:'1'}, FADE_SPEED);
                    }
                }
            }, 50);
        });
    });
</script>

HTMLに1文字ずつ表示したい文章を書く

例

<p class='fadein'>
    <span>あ…ありのまま 今　起こった事を話すぜ！</span><br>
    <span>『おれは奴の前で階段を登っていたと</span><br>
    <span>　思ったらいつのまにか降りていた』</span><br>
    <span>催眠術だとか超スピードだとか</span><br>
    <span>そんなチャチなもんじゃあ　断じてねえ</span><br>
    <span>もっと恐ろしいものの片鱗を味わったぜ…</span><br>
</p>

class='fadein'の子要素になる<span>で囲った文章が、1文字ずつ順番に表示されます。
複数行になる場合は、<span>の外側に<br>タグを記述します。

おまけ

文字が流れる速さや文字のフェードインの速さを調整する場合は、JavaScriptの次の値を変更します。

var DELAY_SPEED = 100;//文字が流れる速さ
var FADE_SPEED = 500;//文字のフェードインの速さ

単位はミリ秒。値が小さいほど速くなります。