Scramble letter effect

An awesome text scrambling effect

by Chris Grgich-Tran

HTML

<div id="content">
    <img src="https://apps.grgichtran.com/img/matrix.png" /><br/>
    <div id="msg">Sorry, we are hacking the binary.</div><br/><br/>
    <div id="please">Please try again in a few minutes.</div>
</div>

CSS

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: local('Press Start 2P'), local('PressStart2P-Regular'), url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivNm4I81.woff2) format('woff');
}

body {
      font-family: 'Press Start 2P', cursive;
    font-size: 0.8em;
    line-height: 1.4;
    color: #444;
    background-color: #efefef;
}

#content {text-align: center; width: 320px; margin: 20px auto;}
#please { color: #888; }
#msg { }
#msg span { color: #444; }

JavaScript

// random letter effect
$.gl = {};
$.gl.intervalID = -1;
$.gl.countDown = 6.00;
$.gl.fillCharInterval = 0.08;
$.gl.beat = 0.00;
$.gl.step = 0.00;
$.gl.div = null;
$.gl.orig = null; // char array
$.gl.doneCallback = null;

$.gl.randomLetter = function() {
	return String.fromCharCode(Math.floor(((Math.random() * 1000) % 73) + 49));
};

$.gl.scramble = function(__id) {
	$(__id).attr('orig', $(__id).text());
	$.gl.orig = $(__id).attr('orig').split('');
	$(__id).empty();
	for (var i = 0; i < $.gl.orig.length; i++) {
		if ($.gl.orig[i] != ' ') {
			$(__id).append('<span>' + $.gl.randomLetter() + '</span>');
		} else {
			$(__id).append('<span> </span>');
		}
	}
};

$.gl.unscramble = function(__id, __doneCallback) {
	if ($.gl.intervalID == -1) {
		$.gl.orig = $(__id).attr('orig').split('');
		$.gl.countDown = 6.00;
		$.gl.beat = 0.00;
		$.gl.step = 0.00;
		$.gl.div = $(__id);
		$.gl.doneCallback = __doneCallback;
		$.gl.intervalID = window.setInterval($.gl.unscrambleChar, 1);
	} else {
		window.clearInterval($.gl.intervalID);
		$.gl.intervalID = -1;
	}
};

$.gl.unscrambleChar = function() {
	var spans = $('span', $($.gl.div));
	$.gl.countDown -= 0.01;
	$.gl.step += 0.01;
	$.gl.beat += 0.01;
	var charIndex = Math.floor(((Math.random() * 1000) * 1000) % $.gl.orig.length);

	if ($.gl.countDown <= 0) {
		window.clearInterval($.gl.intervalID);
		$.gl.intervalID = -1;
		// fill in correct letters
		for (var i = 0; i < spans.length; i++) {
			$(spans[i]).text($.gl.orig[i]);
		}
		if (typeof($.gl.doneCallback) === 'function') {
			$.gl.doneCallback();
		}
	}

	if ($.gl.beat >= 0.01) {
		// fill with random chars
		var ch = $(spans[charIndex]).text();
		if (ch != '' && ch != $.gl.orig[charIndex]) {
			$(spans[charIndex]).text($.gl.randomLetter());
		}
		$.gl.beat = 0.00;
	}

	if ($.gl.step >= $.gl.fillCharInterval) {
		// fill with correct char
		var ch = $(spans[charIndex]).text();
		if (ch != '' && ch != $.gl.orig[charIndex])...