KrofDrakula/Cross-eyed-stereo.html

## Cross-eyed-stereo.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Stereo page</title>
		<style>
			html, body, div { margin: 0; padding: 0 }
			body { width: 1280px; margin: 0 auto; }
			.stereo { background: url(cobblestone.jpg); padding: 40px; }
			.header { margin: 40px; padding: 10px; background: rgba(0,0,0,0.5); color: white; }
			.content { margin: 20px; padding: 20px; background: rgba(255, 255, 255, 0.5) }
			.threed-left-eye { width: 560px; float: right; }
			.threed-right-eye { width: 560px; float: left; }
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script>
			$(function() {
				var left = $(".stereo");
				var right = left.clone().insertAfter(left);
				var expansion = 3;
				left.addClass("threed-left-eye");
				right.addClass("threed-right-eye");
				setTimeout(function() {
					left.find("[data-distance]").each(function() {
						var dist = Number($(this).attr("data-distance"));
						$(this).css({
							position: "relative",
							left: - Math.log(dist) * expansion + "px"
						});
					});
					var dist = Number(left.attr("data-distance"));
					if(dist > 0) {
						left.css({
							backgroundPosition: -Math.log(dist) * expansion + "px 0"
						});
					}

					right.find("[data-distance]").each(function() {
						var dist = Number($(this).attr("data-distance"));
						$(this).css({
							position: "relative",
							left: Math.log(dist) * expansion + "px"
						});
					});

					var dist = Number(right.attr("data-distance"));
					if(dist > 0) {
						right.css({
							backgroundPosition: Math.log(dist) * expansion + "px 0"
						});
					}

				}, 4000);
			});
		</script>
	</head>
	<body>
		<div class="stereo" data-distance="10000">
			<div class="header" data-distance="0">
				<h1>Lorem ipsum dolor sit amet</h1>
			</div>
			<div class="content" data-distance="40">
				<div class="main" data-distance="10">
					<h1>Howdy!</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum lobortis enim, in mattis est eleifend sit amet. Etiam consequat porttitor felis vel feugiat. Aliquam erat volutpat. Maecenas fermentum cursus dictum. Sed condimentum posuere massa quis fermentum. Nullam semper cursus quam, quis viverra lorem ullamcorper in. Suspendisse accumsan egestas porttitor. Donec ligula dolor, facilisis et venenatis vitae, suscipit a purus. Vivamus eu lacus lacinia nunc rhoncus imperdiet sed at justo. Nullam venenatis, quam eu lobortis pellentesque, risus eros ullamcorper ligula, et placerat ipsum nulla sed ipsum. Sed at elit et orci placerat molestie. Etiam dictum placerat risus. Vestibulum faucibus risus a elit cursus placerat. Sed lobortis, odio in dignissim porttitor, libero sem pellentesque lacus, in mollis lacus diam vel mi. Duis ac sem massa, nec fringilla elit. Curabitur consectetur felis eget justo blandit commodo.</p>
					<p>Sed in velit eros. Quisque quis nisl vitae justo suscipit fringilla. Praesent arcu leo, fermentum vel aliquet quis, blandit consequat magna. Praesent a tortor dui, vel interdum purus. Duis vel lectus sed orci mollis molestie. Suspendisse quis mi justo, sed euismod mi. Nunc vel volutpat diam. Aliquam bibendum, libero et aliquam aliquam, enim neque bibendum ipsum, eu dictum est augue a dui. In hac habitasse platea dictumst. Suspendisse sagittis eleifend mauris, nec accumsan velit fringilla in. Ut a nisl felis, nec semper massa. Nunc ac arcu ligula.</p>
					<p>Phasellus eget quam ac felis elementum ultrices a volutpat odio. Vivamus aliquet pretium tincidunt. Cras luctus dui a sem ultrices ultrices. Integer ac gravida nunc. Nulla posuere vulputate mauris in consequat. In iaculis dictum pulvinar. Duis sollicitudin, felis nec posuere consectetur, nibh elit porttitor quam, eu feugiat est lectus ut tortor. Etiam eget diam mauris, eu ornare dui. Donec ultrices convallis risus, non iaculis sem lobortis id. Nullam mattis laoreet odio imperdiet posuere. Etiam dignissim porttitor est vel posuere. Sed sed lectus nec lorem congue malesuada eget non dolor. In tincidunt nulla diam, rhoncus ornare augue. Donec iaculis auctor tincidunt. Vestibulum metus felis, rhoncus eu sagittis quis, congue sit amet felis. Duis vitae nibh nec nisl feugiat ultricies a nec magna. Maecenas gravida lobortis pulvinar. Phasellus ac eros a quam rutrum iaculis ut eget est. Aenean iaculis purus nec tellus dictum et auctor lacus pretium.</p>
					<p>Integer ante orci, vestibulum ut scelerisque et, pulvinar sed enim. Pellentesque vehicula neque sit amet ligula varius nec lobortis odio dictum. Nam luctus lacus eget enim laoreet interdum. Sed eget quam non nulla cursus gravida. Sed sollicitudin nisl ut neque convallis molestie. Nunc non tellus libero, ut pulvinar metus. Nam elementum, lectus sit amet accumsan tincidunt, nisl arcu rutrum velit, aliquam feugiat ipsum nibh quis risus. Ut interdum, dolor in accumsan rutrum, sem tortor egestas mauris, luctus placerat nunc quam scelerisque mauris. Ut sollicitudin lorem vitae urna luctus hendrerit. Cras vel mi eget augue aliquam fringilla. Sed euismod malesuada auctor. Sed in lorem in nunc interdum volutpat. Pellentesque viverra lacus nec tellus pellentesque fermentum. Donec vehicula bibendum arcu eu rhoncus. Aliquam vitae sapien lorem. Sed id dui ipsum, vitae hendrerit eros. Phasellus in enim at augue porttitor fermentum.</p>
					<p>Proin eget nunc ante, at ultricies ipsum. Donec auctor enim lorem, dictum luctus magna. Nulla porta, urna id placerat vulputate, ipsum ligula laoreet odio, in pharetra urna augue ut enim. Mauris tempor ultrices lorem sit amet malesuada. Sed aliquam, arcu sed pretium placerat, arcu eros consectetur nisi, sed laoreet ligula nibh vel neque. Sed sagittis nunc id est congue lobortis. Donec non tincidunt lorem. Donec sem ligula, pretium in condimentum a, condimentum pretium metus. Nulla venenatis elit et dui mattis id mattis elit tempus. Sed id nunc ornare ligula lobortis rhoncus. Nulla ac sem a purus placerat laoreet in vitae quam. Pellentesque eu est tellus. Phasellus consectetur, turpis at bibendum fringilla, urna arcu commodo erat, id auctor felis quam eu justo. Sed porta enim vitae arcu imperdiet laoreet. Nullam ut enim id magna dignissim ullamcorper sit amet eu quam. Sed fermentum luctus vestibulum. Fusce dolor odio, hendrerit eget convallis sit amet, sagittis eu massa.</p>
				</div>
			</div>
		</div>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Stereo page</title>
	<style>
	html, body, div { margin: 0; padding: 0 }
	body { width: 1280px; margin: 0 auto; }
	.stereo { background: url(cobblestone.jpg); padding: 40px; }
	.header { margin: 40px; padding: 10px; background: rgba(0,0,0,0.5); color: white; }
	.content { margin: 20px; padding: 20px; background: rgba(255, 255, 255, 0.5) }
	.threed-left-eye { width: 560px; float: right; }
	.threed-right-eye { width: 560px; float: left; }
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script>
	$(function() {
	var left = $(".stereo");
	var right = left.clone().insertAfter(left);
	var expansion = 3;
	left.addClass("threed-left-eye");
	right.addClass("threed-right-eye");
	setTimeout(function() {
	left.find("[data-distance]").each(function() {
	var dist = Number($(this).attr("data-distance"));
	$(this).css({
	position: "relative",
	left: - Math.log(dist) * expansion + "px"
	});
	});
	var dist = Number(left.attr("data-distance"));
	if(dist > 0) {
	left.css({
	backgroundPosition: -Math.log(dist) * expansion + "px 0"
	});
	}

	right.find("[data-distance]").each(function() {
	var dist = Number($(this).attr("data-distance"));
	$(this).css({
	position: "relative",
	left: Math.log(dist) * expansion + "px"
	});
	});

	var dist = Number(right.attr("data-distance"));
	if(dist > 0) {
	right.css({
	backgroundPosition: Math.log(dist) * expansion + "px 0"
	});
	}

	}, 4000);
	});
	</script>
	</head>
	<body>
	<div class="stereo" data-distance="10000">
	<div class="header" data-distance="0">
	<h1>Lorem ipsum dolor sit amet</h1>
	</div>
	<div class="content" data-distance="40">
	<div class="main" data-distance="10">
	<h1>Howdy!</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum lobortis enim, in mattis est eleifend sit amet. Etiam consequat porttitor felis vel feugiat. Aliquam erat volutpat. Maecenas fermentum cursus dictum. Sed condimentum posuere massa quis fermentum. Nullam semper cursus quam, quis viverra lorem ullamcorper in. Suspendisse accumsan egestas porttitor. Donec ligula dolor, facilisis et venenatis vitae, suscipit a purus. Vivamus eu lacus lacinia nunc rhoncus imperdiet sed at justo. Nullam venenatis, quam eu lobortis pellentesque, risus eros ullamcorper ligula, et placerat ipsum nulla sed ipsum. Sed at elit et orci placerat molestie. Etiam dictum placerat risus. Vestibulum faucibus risus a elit cursus placerat. Sed lobortis, odio in dignissim porttitor, libero sem pellentesque lacus, in mollis lacus diam vel mi. Duis ac sem massa, nec fringilla elit. Curabitur consectetur felis eget justo blandit commodo.</p>
	<p>Sed in velit eros. Quisque quis nisl vitae justo suscipit fringilla. Praesent arcu leo, fermentum vel aliquet quis, blandit consequat magna. Praesent a tortor dui, vel interdum purus. Duis vel lectus sed orci mollis molestie. Suspendisse quis mi justo, sed euismod mi. Nunc vel volutpat diam. Aliquam bibendum, libero et aliquam aliquam, enim neque bibendum ipsum, eu dictum est augue a dui. In hac habitasse platea dictumst. Suspendisse sagittis eleifend mauris, nec accumsan velit fringilla in. Ut a nisl felis, nec semper massa. Nunc ac arcu ligula.</p>
	<p>Phasellus eget quam ac felis elementum ultrices a volutpat odio. Vivamus aliquet pretium tincidunt. Cras luctus dui a sem ultrices ultrices. Integer ac gravida nunc. Nulla posuere vulputate mauris in consequat. In iaculis dictum pulvinar. Duis sollicitudin, felis nec posuere consectetur, nibh elit porttitor quam, eu feugiat est lectus ut tortor. Etiam eget diam mauris, eu ornare dui. Donec ultrices convallis risus, non iaculis sem lobortis id. Nullam mattis laoreet odio imperdiet posuere. Etiam dignissim porttitor est vel posuere. Sed sed lectus nec lorem congue malesuada eget non dolor. In tincidunt nulla diam, rhoncus ornare augue. Donec iaculis auctor tincidunt. Vestibulum metus felis, rhoncus eu sagittis quis, congue sit amet felis. Duis vitae nibh nec nisl feugiat ultricies a nec magna. Maecenas gravida lobortis pulvinar. Phasellus ac eros a quam rutrum iaculis ut eget est. Aenean iaculis purus nec tellus dictum et auctor lacus pretium.</p>
	<p>Integer ante orci, vestibulum ut scelerisque et, pulvinar sed enim. Pellentesque vehicula neque sit amet ligula varius nec lobortis odio dictum. Nam luctus lacus eget enim laoreet interdum. Sed eget quam non nulla cursus gravida. Sed sollicitudin nisl ut neque convallis molestie. Nunc non tellus libero, ut pulvinar metus. Nam elementum, lectus sit amet accumsan tincidunt, nisl arcu rutrum velit, aliquam feugiat ipsum nibh quis risus. Ut interdum, dolor in accumsan rutrum, sem tortor egestas mauris, luctus placerat nunc quam scelerisque mauris. Ut sollicitudin lorem vitae urna luctus hendrerit. Cras vel mi eget augue aliquam fringilla. Sed euismod malesuada auctor. Sed in lorem in nunc interdum volutpat. Pellentesque viverra lacus nec tellus pellentesque fermentum. Donec vehicula bibendum arcu eu rhoncus. Aliquam vitae sapien lorem. Sed id dui ipsum, vitae hendrerit eros. Phasellus in enim at augue porttitor fermentum.</p>
	<p>Proin eget nunc ante, at ultricies ipsum. Donec auctor enim lorem, dictum luctus magna. Nulla porta, urna id placerat vulputate, ipsum ligula laoreet odio, in pharetra urna augue ut enim. Mauris tempor ultrices lorem sit amet malesuada. Sed aliquam, arcu sed pretium placerat, arcu eros consectetur nisi, sed laoreet ligula nibh vel neque. Sed sagittis nunc id est congue lobortis. Donec non tincidunt lorem. Donec sem ligula, pretium in condimentum a, condimentum pretium metus. Nulla venenatis elit et dui mattis id mattis elit tempus. Sed id nunc ornare ligula lobortis rhoncus. Nulla ac sem a purus placerat laoreet in vitae quam. Pellentesque eu est tellus. Phasellus consectetur, turpis at bibendum fringilla, urna arcu commodo erat, id auctor felis quam eu justo. Sed porta enim vitae arcu imperdiet laoreet. Nullam ut enim id magna dignissim ullamcorper sit amet eu quam. Sed fermentum luctus vestibulum. Fusce dolor odio, hendrerit eget convallis sit amet, sagittis eu massa.</p>
	</div>
	</div>
	</div>
	</body>
	</html>