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?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>►</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.