JSFiddle - React, Tailwind, and code Playground
CSS
body {
margin:0;
background-color:#000;
color:#fff;
}
.img {
height:100px;
width:100px;
display:inline-block;
margin:0;
padding:0;
position:absolute;
opacity:1.0;
background-repeat:repeat-both;
}
JavaScript
(function () {
var baseUrl = "https://d1rgjmn2wmqeif.cloudfront.net/r/b/";
var imageFiles = [
"64271",
"64272",
"64273",
"64274"
];
var places = {
nw: { x: -1, y: -1 },
ne: { x: 0, y: -1 },
se: { x: 0, y: 0 },
sw: { x: -1, y: 0 },
};
var imageUrn = urn(imageFiles);
for (k in places) {
var image = document.createElement("div");
image.className = "img";
document.body.appendChild(image);
places[k].image = image;
}
function assignOffsets () {
var center = getCenter();
var side = Math.min(center.x, center.y);
for (k in places) {
var image = places[k].image;
image.style.backgroundSize = side + "px " + side + "px";
var xOff = (side / 10) * Math.floor(Math.random() * 10);
var yOff = (side / 10) * Math.floor(Math.random() * 10);
image.style.backgroundPositionX = xOff + "px";
image.style.backgroundPositionY = yOff + "px";
}
}
function assignImages () {
for (k in places) {
var name = imageUrn.draw();
var bgImg = "url('" + baseUrl + name + ".jpg')";
places[k].image.style.backgroundImage = bgImg;
places[k].name = name;
}
}
function getCenter () {
return {
x: Math.floor(window.innerWidth / 2),
y: Math.floor(window.innerHeight / 2)
};
}
function setSizes () {
var center = getCenter();
var side = Math.min(center.x, center.y);
for (k in places) {
var image = places[k].image;
image.style.height = side + "px";
image.style.width = side + "px";
image.style.backgroundSize = side + "px " + side + "px";
var xPos = places[k].x;
var yPos = places[k].y;
image.style.top = (center.y + yPos * side) + "px";
image.style.left = (center.x + xPos * side) + "px";
}
}
function urn (arr) {
var left = [];
function draw () {
if (!arr.length)
return null;
if (!left.length)
refill();
var index = Math.floor(Math.random() * left.length);
return left.splice(index, 1);
}
function burn...