Animated css matrix type

HTML + CSS animated type forms

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Animated css matrix type</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="canvas" class="_">
  <div id="col-1a"></div>
	<div id="col-1b"></div>
	<div id="col-1c"></div>
	
	<div id="col-2a"></div>
	<div id="col-2b"></div>
	<div id="col-2c"></div>
	
	<div id="col-3a"></div>
	<div id="col-3b"></div>
	<div id="col-3c"></div>
	
	<div id="col-4a"></div>
	<div id="col-4b"></div>
	<div id="col-4c"></div>
	
	<div id="col-5a"></div>
	<div id="col-5b"></div>
	<div id="col-5c"></div>
	
	<div id="col-6a"></div>
	<div id="col-6b"></div>
	<div id="col-6c"></div>
	
	<div id="col-7a"></div>
	<div id="col-7b"></div>
	<div id="col-7c"></div>
	
	<div id="col-8a"></div>
	<div id="col-8b"></div>
	<div id="col-8c"></div>
	
	<div id="col-9a"></div>
	<div id="col-9b"></div>
	<div id="col-9c"></div>
	
	<button>&#9658;</button>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
/* 
** LAYOUT
*/

body {
  background: url('https://codepen.io/images/classy_fabric.png') #333;
	margin: 50px;
	text-align: center;
}
#canvas {
	/* background: url('grid.png'); */
	height: 400px;
	width: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -200px;
	overflow: hidden;
}
button {
	position: absolute;
	height: 20%;
	width: 20%;
	top: 40%;
	left: 40%;
	font-size: 100%;
	background: #fff;
	color: #dc2a2a;
	border-radius: 50%;
	border: 5px solid #333;
}


/* 
** COLUMNS
** Beautiful mathematical symmetry here
* (9 x columns @ 10%) + (10 x gutter @ 1%) = 100% width
*/

/* Apply to style all columns */
#canvas div {
	width: 0%;
	height: 0%;
	position: absolute;
	bottom: 50%;
	background: #ffff00;
	-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* Default columns position (center) */
#col-1a, #col-1b, #col-1c { left: 06%; }
#col-2a, #col-2b, #col-2c { left: 17%; }
#col-3a, #col-3b, #col-3c { left: 28%; }
#col-4a, #col-4b, #col-4c { left: 39%; }
#col-5a, #col-5b, #col-5c { left: 50%; }
#col-6a, #col-6b, #col-6c { left: 61%; }
#col-7a, #col-7b, #col-7c { left: 72%; }
#col-8a, #col-8b, #col-8c { left: 83%; }
#col-9a, #col-9b, #col-9c { left: 89%; }

/* If a letter class is set to canvas */
#canvas[class] div { width: 10%; }

/* If canvas has class _ */
#canvas._ div { bottom: 01%; height: 98%;}

/* If a letter class is set then shift */
#canvas[class] [id^="col-1"] { left: 01%; }
#canvas[class] [id^="col-2"] { left: 12%; }
#canvas[class] [id^="col-3"] { left: 23%; }
#canvas[class] [id^="col-4"] { left: 34%; }
#canvas[class] [id^="col-5"] { left: 45%; }
#canvas[class] [id^="col-6"] { left: 56%; }
#canvas[class] [id^="col-7"] { left: 67%; }
#canvas[class] [id^="col-8"] { left: 78%; }
#canvas[class] [id^="col-9"] { left: 89%; }


/* Letter N */
.N #col-1a { bottom: 50%; height: 00%; }
.N #col-1b { bottom: 50%; height: 00%; } 
.N #col-1c { bottom: 50%; height: 00%; }

.N #col-2a { bottom: 50%; height: 00%; } 
.N #col-2b { bottom: 01%; height: 98%; } 
.N #col-2c { bottom: 50%; height: 00%; }

.N #col-3a { bottom: 50%; height: 00%; } 
.N #col-3b { bottom: 67%; height: 21%; } 
.N #col-3c { bottom: 50%; height: 00%; }

.N #col-4a { bottom: 50%; height: 00%; } 
.N #col-4b { bottom: 56%; height: 21%; } 
.N #col-4c { bottom: 50%; height: 00%; }

.N #col-5a { bottom: 50%; height: 00%; } 
.N #col-5b { bottom: 45%; height: 21%; } 
.N #col-5c { bottom: 50%; height: 00%; }

.N #col-6a { bottom: 50%; height: 00%; } 
.N #col-6b { bottom: 34%; height: 21%; } 
.N #col-6c { bottom: 50%; height: 00%; }

.N #col-7a { bottom: 50%; height: 00%; } 
.N #col-7b { bottom: 23%; height: 21%; } 
.N #col-7c { bottom: 50%; height: 00%; }

.N #col-8a { bottom: 50%; height: 00%; } 
.N #col-8b { bottom: 01%; height: 98%; } 
.N #col-8c { bottom: 50%; height: 00%; }

.N #col-9a { bottom: 50%; height: 00%; } 
.N #col-9b { bottom: 50%; height: 00%; } 
.N #col-9c { bottom: 50%; height: 00%; }


/* Letter A */
.A #col-1a { bottom: 50%; height: 00%; } 
.A #col-1b { bottom: 50%; height: 00%; } 
.A #col-1c { bottom: 50%; height: 00%; }

.A #col-2a { bottom: 50%; height: 00%; } 
.A #col-2b { bottom: 01%; height: 32%; } 
.A #col-2c { bottom: 50%; height: 00%; }

.A #col-3a { bottom: 50%; height: 00%; } 
.A #col-3b { bottom: 23%; height: 32%; } 
.A #col-3c { bottom: 50%; height: 00%; }

.A #col-4a { bottom: 23%; height: 10%; } 
.A #col-4b { bottom: 45%; height: 32%; } 
.A #col-4c { bottom: 50%; height: 00%; }

.A #col-5a { bottom: 23%; height: 10%; } 
.A #col-5b { bottom: 67%; height: 32%; } 
.A #col-5c { bottom: 50%; height: 00%; }

.A #col-6a { bottom: 23%; height: 10%; } 
.A #col-6b { bottom: 45%; height: 32%; } 
.A #col-6c { bottom: 50%; height: 00%; }

.A #col-7a { bottom: 50%; height: 00%; } 
.A #col-7b { bottom: 23%; height: 32%; } 
.A #col-7c { bottom: 50%; height: 00%; }

.A #col-8a { bottom: 50%; height: 00%; } 
.A #col-8b { bottom: 01%; height: 32%; } 
.A #col-8c { bottom: 50%; height: 00%; }

.A #col-9a { bottom: 50%; height: 00%; } 
.A #col-9b { bottom: 50%; height: 00%; } 
.A #col-9c { bottom: 50%; height: 00%; }


/* Letter I */
.I #col-1a { bottom: 50%; height: 00%; } 
.I #col-1b { bottom: 50%; height: 00%; } 
.I #col-1c { bottom: 50%; height: 00%; }

.I #col-2a { bottom: 50%; height: 00%; } 
.I #col-2b { bottom: 50%; height: 00%; } 
.I #col-2c { bottom: 50%; height: 00%; }

.I #col-3a { bottom: 50%; height: 00%; } 
.I #col-3b { bottom: 50%; height: 00%; } 
.I #col-3c { bottom: 50%; height: 00%; }

.I #col-4a { bottom: 89%; height: 10%; } 
.I #col-4b { bottom: 50%; height: 00%; } 
.I #col-4c { bottom: 01%; height: 10%; }

.I #col-5a { bottom: 50%; height: 00%; } 
.I #col-5b { bottom: 01%; height: 98%; } 
.I #col-5c { bottom: 50%; height: 00%; }

.I #col-6a { bottom: 89%; height: 10%; } 
.I #col-6b { bottom: 50%; height: 00%; } 
.I #col-6c { bottom: 01%; height: 10%; }

.I #col-7a { bottom: 50%; height: 00%; } 
.I #col-7b { bottom: 50%; height: 00%; } 
.I #col-7c { bottom: 50%; height: 00%; }

.I #col-8a { bottom: 50%; height: 00%; } 
.I #col-8b { bottom: 50%; height: 00%; } 
.I #col-8c { bottom: 50%; height: 00%; }

.I #col-9a { bottom: 01%; height: 00%; } 
.I #col-9b { bottom: 50%; height: 00%; } 
.I #col-9c { bottom: 50%; height: 00%; }


/* Letter L */
.L #col-1a { bottom: 50%; height: 00%; } 
.L #col-1b { bottom: 50%; height: 00%; } 
.L #col-1c { bottom: 50%; height: 00%; }

.L #col-2a { bottom: 50%; height: 00%; } 
.L #col-2b { bottom: 50%; height: 00%; } 
.L #col-2c { bottom: 50%; height: 00%; }

.L #col-3a { bottom: 50%; height: 00%; } 
.L #col-3b { bottom: 01%; height: 98%; } 
.L #col-3c { bottom: 50%; height: 00%; }

.L #col-4a { bottom: 50%; height: 00%; } 
.L #col-4b { bottom: 50%; height: 00%; } 
.L #col-4c { bottom: 01%; height: 10%; }

.L #col-5a { bottom: 50%; height: 00%; } 
.L #col-5b { bottom: 50%; height: 00%; } 
.L #col-5c { bottom: 01%; height: 10%; }

.L #col-6a { bottom: 50%; height: 00%; } 
.L #col-6b { bottom: 50%; height: 00%; } 
.L #col-6c { bottom: 01%; height: 10%; }

.L #col-7a { bottom: 50%; height: 00%; } 
.L #col-7b { bottom: 50%; height: 00%; } 
.L #col-7c { bottom: 01%; height: 10%; }

.L #col-8a { bottom: 50%; height: 00%; } 
.L #col-8b { bottom: 50%; height: 00%; } 
.L #col-8c { bottom: 50%; height: 00%; }

.L #col-9a { bottom: 50%; height: 00%; } 
.L #col-9b { bottom: 50%; height: 00%; } 
.L #col-9c { bottom: 50%; height: 00%; }


/* Letter S */
.S #col-1a { bottom: 50%; height: 00%; } 
.S #col-1b { bottom: 50%; height: 00%; } 
.S #col-1c { bottom: 50%; height: 00%; }

.S #col-2a { bottom: 50%; height: 00%; } 
.S #col-2b { bottom: 45%; height: 10%; } 
.S #col-2c { bottom: 50%; height: 00%; }

.S #col-3a { bottom: 50%; height: 00%; } 
.S #col-3b { bottom: 45%; height: 21%; } 
.S #col-3c { bottom: 50%; height: 00%; }

.S #col-4a { bottom: 56%; height: 21%; } 
.S #col-4b { bottom: 45%; height: 10%; } 
.S #col-4c { bottom: 01%; height: 21%; }

.S #col-5a { bottom: 67%; height: 21%; } 
.S #col-5b { bottom: 45%; height: 10%; } 
.S #col-5c { bottom: 12%; height: 21%; }

.S #col-6a { bottom: 78%; height: 21%; } 
.S #col-6b { bottom: 45%; height: 10%; } 
.S #col-6c { bottom: 23%; height: 21%; }

.S #col-7a { bottom: 50%; height: 00%; } 
.S #col-7b { bottom: 34%; height: 21%; } 
.S #col-7c { bottom: 50%; height: 00%; }

.S #col-8a { bottom: 50%; height: 00%; } 
.S #col-8b { bottom: 45%; height: 10%; } 
.S #col-8c { bottom: 50%; height: 00%; }

.S #col-9a { bottom: 50%; height: 00%; } 
.S #col-9b { bottom: 50%; height: 00%; } 
.S #col-9c { bottom: 50%; height: 00%; }
/* Downloaded from https://www.codeseek.co/ */
/* 
** 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();

});

This awesome code ( Animated css matrix type ) is write by Niels Oeltjen, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Niels Oeltjen