Wieber test

by PhilQ

HTML

<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 = [
		['e57373', 'ef5350'],
		['f06292', 'ec407a'],
		['ba68c8', 'ab47bc'],
		['9575cd', '7e57c2'],
		['7986cb', '5c6bc0'],
		['64b5f6', '42a5f5'],
		['4fc3f7', '29b6f6'],
		['4dd0e1', '26c6da'],
		['4db6ac', '26a69a'],
		['81c784', '66bb6a'],
		['aed581', '9ccc65'],
		['dce775', 'd4e157'],
		['fff176', 'ffee58'],
		['ffd54f', 'ffca28'],
		['ffb74d', 'ffa726'],
		['ff8a65', 'ff7043'],
		['a1887f', '8d6e63'],
	],
	size = 100,
	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 = clrs[ Math.floor( Math.random() * clrs.length ) ];
	var src = 'https://placeholdit.imgix.net/~text?txtsize='+Math.round(0.4*size)+'&bg='+clr[1]+'&txtclr='+clr[0]+'&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();
	}
});