Animated css matrix type

Animated css matrix type JS Codes

/* 
** CLASS SWITCHER
** Here we just switch the class of the canvas
** CSS takes care of the rest
*/

// Define 
var text = "NAILS"; // Word to iterate over
var canvas = '#canvas'; // Canvas element
var radius = Math.round($(canvas).width() / 9 / 4); // width / 9 col / 4

// Split word into parts
text.split();

// Set column border radius
$(canvas + ' div').css('border-radius', radius);

// Activate class switching 
$('button').click(function() {
  
	// Fade out play button
	$(this).hide();
	
	// Counter
	var i = 0;
	
	// Loop
	function loop() {
			
		function pause() {
			$(canvas).addClass(currentClass);
		}

		// Run out of letters? restart counter
		if ( i >= text.length ) {
			i = 0;
		}
		
		// Current letter (counter = array pos)
		var currentClass = text[i];
		
		// Increment
		i += 1;
		
		
		// Apply
		$(canvas).removeClass();
		
		setTimeout(pause, 200);
		
		// Delay and run again
		setTimeout(loop, 2400);
	}
	
	// Loop it
	loop();

});