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) { 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.open("GET", "https://status.mojang.com/check", true);
xhr.send(); xhr.send();
}); });

View File

@ -207,7 +207,7 @@ img.preload {
margin: 5px; margin: 5px;
} }
.avatar-wrapper { #avatar-wrapper {
height: 64px; height: 64px;
overflow: hidden; 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 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:card" content="summary">
<meta name="twitter:creator" content="@Crafatar"> <meta name="twitter:creator" content="@Crafatar">
<script src="/javascript/mojang.js"></script> <script src="/javascript/crafatar.js"></script>
</head> </head>
<body> <body>
@ -29,7 +29,7 @@
<h1>Crafatar</h1> <h1>Crafatar</h1>
<h2>A blazing fast API for Minecraft faces!</h2> <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="jomo's avatar" class="avatar jomo"></div>
<div title="jake_0's avatar" class="avatar jake_0"></div> <div title="jake_0's avatar" class="avatar jake_0"></div>
<div title="sk89q's avatar" class="avatar sk89q"></div> <div title="sk89q's avatar" class="avatar sk89q"></div>