/code/javascript/pan.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="icon" src="/images/favicon.gif" />
		<title>Panorama thing</title>
		<style type="text/css">
			body {
				background: #000 fixed 0 50% repeat-x;
				font-family: sans-serif;
			}
			body { text-align: center; }
			div {
				width: 75%;
				margin: auto;
				text-align: center;
				background: #fff;
				background: rgba(255, 255, 255, .5);
				padding: 1em;
				border-radius: 2em;
			}
		</style>
	</head>
	<body>
		<div>Whee.</div>
		<script type="text/javascript">
			var spd = 0.25;
			var lim = document.createElement("img");
			/*
			lim.src = "https://upload.wikimedia.org/wikipedia/commons/2/2a/All_Around_Chajnantor_%E2%80%94_A_360-degree_panorama.jpg";
			lim.src = "http://www.astro.caltech.edu/~nlaw/pano/radio_pano.jpg";
			lim.src = "https://upload.wikimedia.org/wikipedia/commons/0/08/Ezhome_moola_360_degree_panorama.jpg";
			 */
			lim.src = "https://images.pexels.com/photos/411471/pexels-photo-411471.jpeg?cs=srgb&dl=pexels-chris-larson-411471.jpg&fm=jpg";
			lim.onload = function () {
				document.body.style.backgroundImage = "url('"+lim.src+"')";
				lim = lim.width;
				var pos = lim;
				(function doFrame () {
					while ((pos -= spd) > lim) pos -= lim;
					document.body.style.backgroundPosition = pos + "px 50%";
					requestAnimationFrame(doFrame);
				})();
			}
		</script>
	</body>
</html>
download