Wieber test

by PhilQ

HTML

<script src="https://toekantickets.nl/js/tinycolor-min.js"></script>
<button onclick="makeImg();">Blok</button>
<div id="container"></div>

SCSS

*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;}
button {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 10000;
}
#container {
	width: 100%;

	> div {
		position: absolute;
		display: inline-block;
		width: 1px;
		height: 1px;
		float: left;
		overflow: hidden;
		transform-origin: 50% 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
		transition: all 0.35s ease;
		
		&:hover {
			box-shadow: 0px 0px 15px 2px rgba(#000, 0.3);
			transform: translate(-50%, -50%) rotate(-45deg) scale(2);
			z-index: 2;
		}
		
		> img {
			position: absolute;
			top: 50%;
			left: 50%;
			display: inline-block;
			transform-origin: 50% 50%;
			transform: translate(-50%, -50%) rotate(45deg);
		}
	}
}

JavaScript

var clrs = [
		'C5C0B1',
		'35ABDE',
		'9FDFC4',
	],
	size = 100,
	variance = 50,
	cur_x = 0,
	cur_y = 0,
	cur_blok = false;
	

function makeImg(){
	var div_size = Math.floor(Math.sqrt((0.5*size)*(0.5*size)*2));
	// var img_size = 2 * Math.sqrt(0.5 * size * size);
	// var img_size_ceil = Math.ceil(img_size);
	var clr_variance = Math.round((Math.random() * variance) - 0.5*variance);
	var clr = tinycolor( clrs[ Math.floor( Math.random() * clrs.length ) ] );
	clr = (0 > clr_variance) ? clr.darken( clr_variance ) : clr.brighten( clr_variance );
	var src = 'https://placeholdit.imgix.net/~text?txtsize='+Math.round(0.4*size)+'&bg='+ clr.toHexString().substr(1) +'&txtclr='+ clr.darken(20).toHexString().substr(1) +'&txt='+(2*size)+'%C3%97'+(2*size)+'%0Apx&w='+(2*size)+'&h='+(2*size)+'';
	$('#container').append('<div style="width:'+div_size+'px;height:'+div_size+'px;top:'+cur_y+'px;left:'+cur_x+'px;"><img src="'+src+'" alt="" style="width:'+size+'px;height:'+size+'px;" /></div>');
	cur_x += size;
	if ( cur_x > ($(window).width()+0.5*size) ) {
		cur_blok = !cur_blok;
		cur_y += 0.5*size;
		cur_x = cur_blok ? 0.5*size : 0;
	}
}

$(document).ready(function(){
	for(var i=0; i<59; i++) {
		makeImg();
	}
});