タイプライターみたくテキストを扱えるtype-write.js

書いたので一応。

参考：leader22/type-write.js

特徴

というか、自作した理由です。

• 1塊のテキスト内で、独自のタグを入れることで複数の文字スタイルを共存可能
• いかなる瞬間も、HTMLとして不適切な状態にならない
• jQuery等のライブラリに依存しない

最初のが中々クセモノで、探しても見つからなかったんですよねー。
1塊単位でスタイル指定とかは割とあったけど。

2つ目はまあ良いっちゃいいのですが、「特定の瞬間は、閉じタグが存在しない」みたいなのがイヤだったので。

サンプル

雑ですがサンプル置いておきます。

;(function(global) {
  'use strict';

  var doc = global.document;
  var $ = doc.querySelector.bind(doc)

  var outputElm1 = $('#output1');
  var duration   = $('#duration');
  var startBtn1  = $('#start1');
  var outputElm2 = $('#output2');
  var startBtn2  = $('#start2');

  var sampleText = 'あのイーハトーヴォのすきとおった風、{|}夏でも底に冷たさをもつ{<blue}青い{>}そら、{|}うつくしい{<green}森{>}で飾られたモリーオ市、郊外のぎらぎらひかる草の{<italic blue}波{>}。'

  // 1
  startBtn1.addEventListener('click', function() {
    var typeDuration = duration.value;

    var typeWrite1 = new TypeWrite({
      text: sampleText,
      typeWriteDuration: typeDuration,
      onStart: function() {
        outputElm1.innerHTML = 'はじまるよー<hr>';
      },
      onTypeWrite: function(char) {
        outputElm1.innerHTML += char;
      },
      onEnd: function() {
        outputElm1.innerHTML += '<hr>ふぃにっしゅ！';
      }
    });

    typeWrite1.start();
  }, false);


  // 2
  startBtn2.addEventListener('click', function() {
    var typeWrite2 = new TypeWrite({
      text: sampleText,
      isResult: true
    });

    var resultText = typeWrite2.start();
    outputElm2.innerHTML = resultText;
  }, false);

}(window));

ソース見ればすぐわかると思いますが、CSSは別途用意しなきゃだめです。
他にも文字送りの強制終了や、独自メタ文字の書式をオプションで渡せたりします。

以上、ご参考まで。