Typemaster

index.html

<div class="typemaster typemaster-1"></div>
<br/><br/>
<div class="typemaster typemaster-2"></div>

script.js

(function ($) {
	"use strict";

	window.TypeMaster = function (selector, typeWords) {
		this._selector 	= $(selector);
		this._words		= typeWords || false;
	};

	TypeMaster.prototype = {
		_selector: null,
		_words: Boolean,
		_delay: Number,
		_callback: Function,

		done: function(callback) {
			this._callback = callback;

			return this;
		},

		_wrap: function() {
			var t = this._selector.html(), wT = '';
			for (var i = 0; i < t.length; i++) {
				if (t[i] == '<') {
					// look for cLosing tag
					while(t[i] != '>') {
						wT += t[i];
						i++;
					}
					wT += '>';
				} else {
					// wrap it up...
					if(this._words) {
						// .. by words
						wT += '<span class="wrapped">';

						// look for whitespace
						while(t[i] && t[i] != ' ' && t[i] != '.' && t[i] != ',' && t[i] != ';' && t[i] != ':') {
							wT += t[i];
							i++;
						}

						wT += '</span>';

						if(t[i] == ' ') {
							// add whitespace
							wT += ' ';
						} else {
							// add punctuation mark
							wT += '<span class="wrapped">'+ t[i]+ '</span>';
						}
					} else {
						// ... by char
						wT += '<span class="wrapped">' + t[i] + '</span>';
					}
				}
			}

			this._selector.html(wT).show();

			return this;
		},

		type: function(text, delay) {
			this._delay = delay || 100;

			if(text) {
				this._selector.html(text);
			}

			this._wrap();

			var d = 0,
				that = this;
			this._selector.find('.wrapped').each(function() {
				$(this).delay(d).animate({ opacity: 1 }, 0, function() {
					$(this).css('visibility', 'visible');
				});
				d += that._delay;
			});

			setTimeout(function() {
				this._callback.call();
			}.bind(this), d);

			return this;
		}
	}
})(jQuery);

var text = '<p>I am a mighty <b>Message</b>.</p><p>All wrapped up in <small>small</small>, <strong>strong</strong> and <em>italic</em> Tags.</p>';

// type chars
new TypeMaster('.typemaster-1')
  .type(text, 50)
  .done(function() {
    console.log("Done.")
  });

// type words
new TypeMaster('.typemaster-2', true)
  .type(text, 220)
  .done(function() {
    console.log("Done.")
  });

style.css

body {
  background: #999;
}

.typemaster {
  display: none;
  font-family: Courier New, Courier, serif;
  color: #FFF;
  background: #000;
  font-size: 20px;
  width: 450px;
  padding: 5px 15px;
  border: 3px groove #FFF;
}

.typemaster p {
  margin: 4px 0;
}

.typemaster .wrapped {
  visibility: hidden;
}

Typemaster.markdown

Typemaster

A Pen by David Skx on CodePen.

License.