Wieber test

by PhilQ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>
<link rel="stylesheet" href="https://toekantickets.nl/css/skolar_pe.css">
<!-- <button onclick="makeImg();">Blok</button> -->
<div id="container"></div>
<h1><i>van<br/>Heemstra</i></h1>
<h6>INTERACTION<br/>
ONLINE<br/>
MARKETING<br/>
DESIGN</h6>

SCSS

*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;}
@import url(https://toekantickets.nl/css/skolar_pe.css);
body {
	font-family: 'SkolarPE';
	font-size: 50px;
	line-height: 0.8;
	color: rgba(0,0,0, 0.3);
}
button {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 10000;
}
#container {
	width: 100%;
	position: absolute;
	z-index: -1;

	> 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 = 40,
	variance = 40,
	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.lighten( clr_variance ); //.brighten()
	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<500; i++) {
		makeImg();
	}
});