patryknowak/arrows.html

## arrows.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Arrow test</title>
	<style>
		body {
			background: linear-gradient(90deg, tomato 0%, tomato 33.333%, lightblue 33.34%, lightblue 66.666%, yellow 66.67%);
			background: black;
		}
		.arrow {
			width: 100px;
			height: 100px;
			position: absolute;
		}
		.arrow img {
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="arrow" class="arrow">
		<img src="" alt="">
	</div>

	<script>
	var d = document.body,
		w = document.body.clientWidth,
		arrow = document.getElementById('arrow');

	function mHandler(e) {
		var x = e.clientX,
			y = e.clientY,
			d1, d2, abs1 = undefined;

		arrow.style.left = x-50+'px';
		arrow.style.top = y-50+'px';

		//console.log(x, y);

		if(x < (0.33*w) ) {
			abs1 = Math.abs(x - (w*0.33))
			d1 = parseFloat(abs1 / (w*0.33), 2) * 60;
			// console.log('d1 = ' + d1, abs1 / (w*0.33));
			arrow.style.transform = "perspective( 600px ) rotateY("+d1+"deg)";
			arrow.children[0].src = 'arrowl.svg';
		} else if(x > (0.66*w) ) {
			abs1 = Math.abs(x - (w*0.66))
			d1 = parseFloat(abs1 / (w*0.33), 2) * -60;
			// console.log('d1 = ' + d1, abs1 / (w*0.33));
			arrow.style.transform = "perspective( 600px ) rotateY("+d1+"deg)";
			arrow.children[0].src = 'arrowr.svg';
		} else {
			arrow.children[0].src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
		}
	}

	window.addEventListener('DOMContentLoaded', function(){
		console.log('Done');
		document.addEventListener('mousemove', mHandler);
	});


	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Arrow test</title>
	<style>
	body {
	background: linear-gradient(90deg, tomato 0%, tomato 33.333%, lightblue 33.34%, lightblue 66.666%, yellow 66.67%);
	background: black;
	}
	.arrow {
	width: 100px;
	height: 100px;
	position: absolute;
	}
	.arrow img {
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="arrow" class="arrow">
	<img src="" alt="">
	</div>

	<script>
	var d = document.body,
	w = document.body.clientWidth,
	arrow = document.getElementById('arrow');

	function mHandler(e) {
	var x = e.clientX,
	y = e.clientY,
	d1, d2, abs1 = undefined;

	arrow.style.left = x-50+'px';
	arrow.style.top = y-50+'px';

	//console.log(x, y);

	if(x < (0.33*w) ) {
	abs1 = Math.abs(x - (w*0.33))
	d1 = parseFloat(abs1 / (w0.33), 2) 60;
	// console.log('d1 = ' + d1, abs1 / (w*0.33));
	arrow.style.transform = "perspective( 600px ) rotateY("+d1+"deg)";
	arrow.children[0].src = 'arrowl.svg';
	} else if(x > (0.66*w) ) {
	abs1 = Math.abs(x - (w*0.66))
	d1 = parseFloat(abs1 / (w0.33), 2) -60;
	// console.log('d1 = ' + d1, abs1 / (w*0.33));
	arrow.style.transform = "perspective( 600px ) rotateY("+d1+"deg)";
	arrow.children[0].src = 'arrowr.svg';
	} else {
	arrow.children[0].src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
	}
	}

	window.addEventListener('DOMContentLoaded', function(){
	console.log('Done');
	document.addEventListener('mousemove', mHandler);
	});


	</script>
	</body>
	</html>