Animated css matrix type

In this example below you will see how to do a Animated css matrix type with some HTML / CSS and Javascript

HTML + CSS animated type forms

Thumbnail
This awesome code was written by NielsOeltjen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright NielsOeltjen ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/NielsOeltjen/animated-css-matrix-type-ABbKk */
/* 
** 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/NielsOeltjen/animated-css-matrix-type-ABbKk */
/* 
** 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();

});

Comments