avioli/text-switcher.html

## text-switcher.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text Switcher</title>
  <style>
  @-webkit-keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: red; }
  }

  .text-switcher {
    border-right: 3px solid transparent;
  }

  .has-cursor {
    -webkit-animation: blink 1s steps(1) infinite;
  }
  </style>
</head>
<body>

  <div>
    <p><span class="text-switcher">Developers</span> are the rock stars of<br />
    the modern workforce.</p>
  </div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var app = {"textSwitcherTitles":["Web designers","System Admins","Help desk operators","Project Managers"]};
var $ = jQuery;

(function() {
  /**
   * =============
   * Text Switcher
   * =============
   **/

  if ('textSwitcherTitles' in app) {
    var $textSwitcher = $('.text-switcher');
    if ($textSwitcher.length) {
      var titles = app.textSwitcherTitles,
          startAfterTimeInterval = 1000;

      titles.push($textSwitcher.text());

      $.fn.teletype = function(opts) {
        var $this = this,
            defaults = {
              delayBefore: 0,
              delayAfter: 0,
              delayInBetween: 100,
              removalDelay: 50,
              insertionDelay: 50,
              text: '',
              before: '',
              after: ''
            },
            settings = $.extend(defaults, opts),
            oldText = $this.text(),
            insertCharacter,
            removeCharacter = function(amount) {
              setTimeout(function() {
                $this.html(settings.before + oldText.slice(0, -amount) + settings.after);
                amount++;
                if (amount <= oldText.length) {
                  removeCharacter(amount);
                } else {
                  setTimeout(function() {
                    insertCharacter(1);
                  }, settings.delayInBetween);
                }
              }, settings.removalDelay);
            };

        insertCharacter = function(amount) {
          setTimeout(function() {
            $this.html(settings.before + settings.text.slice(0, amount) + settings.after);
            amount++;
            if (amount <= settings.text.length) {
              insertCharacter(amount);
            } else {
              if (typeof settings.callback === "function") {
                setTimeout(function() {
                  settings.callback.apply($this.get(0));
                }, settings.delayAfter);
              }
            }
          }, settings.insertionDelay);
        };

        setTimeout(function() {
          removeCharacter(1);
        }, settings.delayBefore);
      };

      var counter = 0,
          switcher = function() {
            $textSwitcher.addClass('has-cursor');
            $textSwitcher.teletype({
              text: titles[counter++],
              delayBefore: 1000,
              delayAfter: 500,
              //after: '<span class="cursor">|</span>',
              callback: function() {
                $(this).removeClass('has-cursor');
                setTimeout(switcher, startAfterTimeInterval);
              }
            });

            if (counter >= titles.length) {
              counter = 0;
            }
          };

      $(window).on('load', function() {
        setTimeout(switcher, startAfterTimeInterval);
      });
    }
  }
})(); // Text Switcher
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Text Switcher</title>
	<style>
	@-webkit-keyframes blink {
	from, to { border-color: transparent; }
	50% { border-color: red; }
	}

	.text-switcher {
	border-right: 3px solid transparent;
	}

	.has-cursor {
	-webkit-animation: blink 1s steps(1) infinite;
	}
	</style>
	</head>
	<body>

	<div>
	<p><span class="text-switcher">Developers</span> are the rock stars of<br />
	the modern workforce.</p>
	</div>

	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script>
	var app = {"textSwitcherTitles":["Web designers","System Admins","Help desk operators","Project Managers"]};
	var $ = jQuery;

	(function() {
	/**
	* =============
	* Text Switcher
	* =============
	**/

	if ('textSwitcherTitles' in app) {
	var $textSwitcher = $('.text-switcher');
	if ($textSwitcher.length) {
	var titles = app.textSwitcherTitles,
	startAfterTimeInterval = 1000;

	titles.push($textSwitcher.text());

	$.fn.teletype = function(opts) {
	var $this = this,
	defaults = {
	delayBefore: 0,
	delayAfter: 0,
	delayInBetween: 100,
	removalDelay: 50,
	insertionDelay: 50,
	text: '',
	before: '',
	after: ''
	},
	settings = $.extend(defaults, opts),
	oldText = $this.text(),
	insertCharacter,
	removeCharacter = function(amount) {
	setTimeout(function() {
	$this.html(settings.before + oldText.slice(0, -amount) + settings.after);
	amount++;
	if (amount <= oldText.length) {
	removeCharacter(amount);
	} else {
	setTimeout(function() {
	insertCharacter(1);
	}, settings.delayInBetween);
	}
	}, settings.removalDelay);
	};

	insertCharacter = function(amount) {
	setTimeout(function() {
	$this.html(settings.before + settings.text.slice(0, amount) + settings.after);
	amount++;
	if (amount <= settings.text.length) {
	insertCharacter(amount);
	} else {
	if (typeof settings.callback === "function") {
	setTimeout(function() {
	settings.callback.apply($this.get(0));
	}, settings.delayAfter);
	}
	}
	}, settings.insertionDelay);
	};

	setTimeout(function() {
	removeCharacter(1);
	}, settings.delayBefore);
	};

	var counter = 0,
	switcher = function() {
	$textSwitcher.addClass('has-cursor');
	$textSwitcher.teletype({
	text: titles[counter++],
	delayBefore: 1000,
	delayAfter: 500,
	//after: '<span class="cursor">\|</span>',
	callback: function() {
	$(this).removeClass('has-cursor');
	setTimeout(switcher, startAfterTimeInterval);
	}
	});

	if (counter >= titles.length) {
	counter = 0;
	}
	};

	$(window).on('load', function() {
	setTimeout(switcher, startAfterTimeInterval);
	});
	}
	}
	})(); // Text Switcher
	</script>
	</body>
	</html>