8-Bit Avatar
How do I make an 8-bit avatar?
Yeah so it's a simple 8bit-ish avatar. Super slow code, I just did it as a joke and in a hurry :P // thumbnail is messed up because of animations. What is a 8-bit avatar? How do you make a 8-bit avatar? This script and codes were developed by António Capelo on 15 December 2022, Thursday.
8-Bit Avatar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>8-Bit Avatar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>Change Cell Height:</p>
<form oninput="amount.value=rangeInput.value"> <input style="width: 250px;" type="range" id="rangeInput" name="rangeInput" min="10" max="60"> <output name="amount" for="rangeInput">choose the </output><span>px</span> </form>
<div class="main row">
</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>
8-Bit Avatar - Script Codes CSS Codes
* { font-family: arial;
}
.main { max-width: 600px; margin-top: 30px; margin-bottom: 30px; margin-left: auto; margin-right: auto;
}
.cell { float: left; height: 30px; width: 6.25%; opacity: 0.0;
}
.blank { background: white;
}
.brown { background: #7E6C50;
}
.grey { background: #82878A;
}
.yellow { background: #DBD597;
}
.dark-yellow { background: #A9A477;
}
8-Bit Avatar - Script Codes JS Codes
var matrix = [
['blank','blank','blank','blank','blank','blank','brown','brown','brown','brown','brown','brown','blank','blank','blank','blank'],
['blank','blank','blank','blank','blank','brown','brown','brown','brown','brown','brown','brown','brown','blank','blank','blank'],
['blank','blank','blank','blank','blank','brown','brown','yellow','yellow','yellow','yellow','yellow','yellow','blank','blank','blank'],
['blank','blank','blank','blank','blank','brown','yellow','yellow','yellow','yellow','yellow','yellow','yellow','blank','blank','blank'],
['blank','blank','blank','blank','yellow','brown','yellow','yellow','yellow','yellow','yellow','yellow','yellow','blank','blank','blank'],
['blank','blank','blank','blank','yellow','brown','yellow','yellow','yellow','yellow','yellow','yellow','yellow','blank','blank','blank'],
['blank','blank','blank','blank','yellow','brown','brown','yellow','yellow','yellow','yellow','yellow','yellow','blank','blank','blank'],
['blank','blank','blank','blank','blank','brown','brown','brown','yellow','brown','brown','brown','brown','blank','blank','blank'],
['blank','blank','blank','blank','blank','dark-yellow','brown','brown','brown','brown','yellow','yellow','brown','blank','blank','blank'],
['blank','blank','blank','blank','blank','dark-yellow','brown','brown','brown','brown','brown','brown','brown','blank','blank','blank'],
['blank','blank','blank','blank','blank','yellow','dark-yellow','dark-yellow','brown','brown','brown','brown','brown','blank','blank','blank'],
['blank','blank','blank','blank','grey','yellow','yellow','dark-yellow','dark-yellow','dark-yellow','brown','brown','blank','blank','blank','blank'],
['blank','blank','grey','grey','grey','grey','yellow','yellow','yellow','yellow','yellow','yellow','grey','grey','blank','blank'],
['blank','grey','grey','grey','grey','grey','grey','yellow','yellow','yellow','yellow','grey','grey','grey','grey','blank'],
['blank','grey','grey','grey','grey','grey','grey','grey','grey','grey','grey','grey','grey','grey','grey','blank'],
['blank','yellow','yellow','grey','grey','grey','grey','grey','grey','grey','grey','grey','grey','grey','yellow','blank'],
['blank','yellow','yellow','grey','grey','grey','grey','grey','grey','grey','grey','grey','grey','grey','yellow','blank']
];
jQuery(document).ready(function ($) { $.each(matrix, function (index, el) { window.setTimeout(function(){ drawRow(el)} ,500 + ( index * 150)); }) $('#rangeInput').on('change', updateTextInput); function updateTextInput(ev) { var val = ev.target.value; console.log(val); $.each($('.cell'), function (index, el) { $(el).css({height: val+'px'}); }) } function drawRow(el) { $.each(el, function (id,el) { var newElement = document.createElement('div'); $(newElement).addClass('cell'); $(newElement).addClass(el); $(newElement).text(''); $('.main').append(newElement); var w = $(newElement).css('width').replace('px',''); var h = Math.ceil(w/5)*5; if (typeof h === 'number') { $(newElement).css('height',h); } else { $(newElement).css('height','40px'); } $(newElement).fadeTo("slow", 1.0); }) }
});
Developer | António Capelo |
Username | capelo |
Uploaded | December 15, 2022 |
Rating | 3 |
Size | 2,527 Kb |
Views | 6,072 |
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!
Name | Size |
Room | 5,196 Kb |
Max-height transition | 2,643 Kb |
ToDo | 8,475 Kb |
AngularJS Modal Factory | 3,839 Kb |
Full-width slider. | 3,886 Kb |
Custom checkbox example | 3,495 Kb |
React Boilerplate | 1,457 Kb |
Background cover | 3,735 Kb |
Donut Chart example - MorrisJS | 2,385 Kb |
Brainerd scroller | 3,165 Kb |
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!
Name | Username | Size |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Z-index demo | Kblh | 1,534 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
NAV WPMANAGER | Mstoic | 1,991 Kb |
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. Hide Your IP Now!