Animated css matrix type

HTML + CSS animated type forms What is a animated css matrix type How do you make a animated css matrix type? This script and codes were developed by Niels Oeltjen on 12 November 2021, Friday.

How do I make an animated css matrix type?
  1. Animated css matrix type Previews
  2. Animated css matrix type HTML Codes
  3. Animated css matrix type CSS Codes
  4. Animated css matrix type JS Codes
Animated css matrix type Previews

Animated css matrix type HTML Codes

<!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>

Animated css matrix type CSS Codes

/* 
** 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%; }

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();

});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.