「タイピングしてる」っぽいテキストエフェクトを作る

Ads

Result

jQuery

$("#type").each(function() {

    var $this = $(this);
    var str = $this.text();
    $this.empty().show();
    str = str.split("");
    str.push("|");

    // 待機時間
    var delay = 100;

    $.each(str, function(i, val) {
        if (val == "^") {
            // ^を書くと待機する
        }
        else {
            $this.append('<span>' + val + '</span>');
            $this.children("span").hide().fadeIn(100).delay(delay * i);
        }
    });
    $this.children("span:last").css("textDecoration", "blink");
});​

html

<p id="type">こんにちは!^^^^かちびと.netです。^^^^^^^^^^ 管理者はおじさんです</p>​

via

ghosttype