Animated css matrix type

Developer
Niels Oeltjen
Size
3,484 Kb
Views
26,299

How do I make an 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 08 September 2022, Thursday.

Animated css matrix type Previews
IQ Test

Animated css matrix type - Script Codes 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 - Script Codes 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 - Script Codes 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();
});
Animated css matrix type - Script Codes
Animated css matrix type - Script Codes
Home Page Home
Developer Niels Oeltjen
Username NielsOeltjen
Uploaded September 08, 2022
Rating 3.5
Size 3,484 Kb
Views 26,299
Do you need developer help for Animated css matrix type?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Niels Oeltjen (NielsOeltjen) Script Codes
Name
Expanding text links
Simple spinner
Sweet star loader
Text as background
Button toggle box
Nice outline hover effect
Prototype for a menu pattern
Multiple SVG icons in one file
Prose.io repo icon
Rounded tabs
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!