shuffle avatars in website header

This commit is contained in:
jomo 2015-10-15 01:46:14 +02:00
parent 882b0753bc
commit 70900a249b
3 changed files with 10 additions and 3 deletions

View File

@ -31,6 +31,13 @@ xhr.onload = function() {
};
document.addEventListener("DOMContentLoaded", function(event) {
var avatars = document.querySelector("#avatar-wrapper");
for (var i = 0; i < avatars.children.length; i++) {
// shake 'em on down!
// https://stackoverflow.com/a/11972692/2517068
avatars.appendChild(avatars.children[Math.random() * i | 0]);
}
xhr.open("GET", "https://status.mojang.com/check", true);
xhr.send();
});

View File

@ -207,7 +207,7 @@ img.preload {
margin: 5px;
}
.avatar-wrapper {
#avatar-wrapper {
height: 64px;
overflow: hidden;
}

View File

@ -17,7 +17,7 @@
<meta property="og:description" content="A blazing fast Minecraft avatar API with support for avatars, skins, and 3D renders.">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@Crafatar">
<script src="/javascript/mojang.js"></script>
<script src="/javascript/crafatar.js"></script>
</head>
<body>
@ -29,7 +29,7 @@
<h1>Crafatar</h1>
<h2>A blazing fast API for Minecraft faces!</h2>
<div class="avatar-wrapper">
<div id="avatar-wrapper">
<div title="jomo's avatar" class="avatar jomo"></div>
<div title="jake_0's avatar" class="avatar jake_0"></div>
<div title="sk89q's avatar" class="avatar sk89q"></div>