Clone hexagons at random and append to body

With fade in and fade out

by Luke Harby

HTML

<div class="hex"></div>

CSS

body {
    background:#EEE;
}

.hex {
	display:none;
	background:url("https://dl.dropboxusercontent.com/u/66584/tumblr/hex/img/layout/hexagon.png") no-repeat 0 0;
	width:195px;
	height:221px;
	z-index:-1;
}

JavaScript

function initHex() {
    $('.hex-clone').remove();
    console.log($('.hex-clone'));
		$rndNum = Math.floor(Math.random() * 8) + 5;
		var e = $('.hex');
			for (var i = 0; i < $rndNum ; i++) {
			$docHeight = $(window).height();
			$docHeight = Math.random() * $docHeight * 2;
			$docWidth = $(window).width();
			$docWidth = Math.random() * $docWidth;
			$rndOpacity = Math.random();
			$rndSpeed = Math.floor(Math.random() * 2000) + 2000;
			e.each(function(){
				$(this).css({
					position:	'absolute',
					top:		$docHeight,
					left:		$docWidth - 195,
					opacity:	$rndOpacity
				});
				e.clone().prependTo('body').addClass('hex-clone').delay(e.length*800).fadeIn($rndSpeed).delay(1000).fadeOut($rndSpeed*2);
				console.log($rndNum, $rndOpacity, $rndSpeed);
			});
		}
	}

setInterval(initHex, 12000);