DanielJWood · January 17, 2014 19:39
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html>
 <head class="no-skrollr">
 	<meta charset="utf-8">

 	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

 	<title>Nice </title>
 	<link rel="stylesheet" type="text/css" href="../reset.css">
 	<link rel="stylesheet" type="text/css" href="main.css">
 	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 	<script type="text/javascript" src="http://futureofcarsharing.com/_media/js/jquery-css-transform.js"></script>
 	<script type="text/javascript" src="http://futureofcarsharing.com/_media/js/jquery-animate-css-rotate-scale.js"></script>

 	<style type="text/css">
 	/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
 */

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 body {
 	line-height: 1;
 }
 ol, ul {
 	list-style: none;
 }
 blockquote, q {
 	quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
 	content: '';
 	content: none;
 }
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }

 		html {
    overflow-x: hidden;
 }

 #space-body {
 	position: relative;
 	width: 100%;
 	background-image: url('http://i.imgur.com/wYcYMtk.png');
 	/*background-color: rgba(2,2,2,0.9);*/
 	height: 3000px;
 }

 #sun {
 	margin: 0 auto;
 	height: 0px;
 }

 #sun img {
 	width: 100%;
 	margin-top:-50%;			
 }

 #earth {
 	position: absolute;
 	top: 1400px;
 	width: 30%;
 	left: 50%;
 	margin-left: -15%;

 }

 #earth img {
 	width: 100%;
 	margin: 0 auto;
 	display: block;
 }

 .satellite {
 	position: absolute;
 	top: 1000px;
 	width: 300px;
 	height: 200px;
 	left: 50%;
 	margin-left: -15%;	
 	background-image:url('http://www.spacepretzel.com/pics/satellite.png');
 	background-repeat:no-repeat;
 	background-position:center;
 	background-size: 300px 200px;
 }
 	#sun {
 		border: 1px solid black;
 		/*-webkit-transform:rotate(120deg);*/
 	}

 	</style>
 </head>

 <body>
 	<div id="space-body">
 		<div class="planet" id="sun">
 			<img src="http://th00.deviantart.net/fs70/PRE/i/2010/266/7/9/golden_planet_sun_png_by_ravenmaddartwork-d2zauun.png">
 		</div>
 		<div id="moveMe" class="satellite">
 <!-- 			<img src="../images/satellite.png">
 -->		</div>
 		<div class="planet" id="earth">
 			<img src="http://th00.deviantart.net/fs71/PRE/i/2010/266/b/e/strange_planet_png_by_ravenmaddartwork-d2zau51.png">
 		</div>
 	</div>

 	<script type="text/javascript">
 	// var s = skrollr.init();


 	// SUN ANIMATION
 // SUN ANIMATION
 $(document).ready(function sunAnimation() {
    $("#sun").
      animate({rotate:'+=360deg'},30000, sunAnimation);
 	$("#earth").
 	animate({rotate:'+=360deg'},30000, sunAnimation);
 });

 	</script>

 	<script type="text/javascript">
 	var ElementRevolver = (function() {
    
    function getPosition(settings, ellapsedTime) {
        var angle = getAngle(settings, ellapsedTime);
        return {
            x: Math.round(settings.center.x + (800) * Math.cos(angle)),
            y: Math.round(settings.center.y + (800) * Math.sin(angle))
        };
    }
    
    function getAngle(settings, ellapsedTime) {
        return ellapsedTime / settings.interval * 2 * Math.PI * settings.direction - settings.startPositionRad;
    }
    
    function start(id, settings) {
        var el = document.getElementById(id),
            startTime = (new Date()).getTime(),
            width = el.offsetWidth,
            height = el.offsetHeight;
        if(el['#rev:tm'] !== null) stop(id);
        el.style.position = settings.cssPosition || 'absolute';
        if(!settings.startPositionRad) settings.startPositionRad = settings.startPositionDeg / 180 * Math.PI;
        el['#rev:tm'] = setInterval(function() {
            var pos = getPosition(settings, (new Date()).getTime() - startTime);
            el.style.left = (pos.x - Math.round(width / 2)) + 'px';
            el.style.top = (pos.y - Math.round(height / 2)) + 'px';
        }, settings.updateInterval);
        if(settings.iterations > -1) setTimeout(function() {
            stop(id);
        }, settings.iterations * settings.interval);
    }
    
    function stop(id) {
        var el = document.getElementById(id);
        if(el['#rev:tm'] === null) return;
        clearInterval(el['#rev:tm']);
        el['#rev:tm'] = null;
    }
    
    return {
        start: start,
        stop: stop
    };
    
 })();

 ElementRevolver.start('moveMe', {
    radius: 1500,
    center: { x: 750, y: 000 },
    // time in milliseconds for one revolution
    interval: 19000,
    // direction = 1 for clockwise, -1 for counterclockwise
    direction: 1,
    // number of times to animate the revolution (-1 for infinite)
    iterations: -1,
    // startPosition can be a degree angle
    // (0 = right, 90 = top, 180 = left, 270 = bottom)
    startPositionDeg: 90,
    // how often (in milliseconds) the position of the
    // circle should be attempted to be updated
    updateInterval: 50
 });


 	</script>
 </body>

 </html>

	<!DOCTYPE html>
	<html>
	<head class="no-skrollr">
	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

	<title>Nice </title>
	<link rel="stylesheet" type="text/css" href="../reset.css">
	<link rel="stylesheet" type="text/css" href="main.css">
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="http://futureofcarsharing.com/_media/js/jquery-css-transform.js"></script>
	<script type="text/javascript" src="http://futureofcarsharing.com/_media/js/jquery-animate-css-rotate-scale.js"></script>

	<style type="text/css">
	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 \| 20110126
	License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block;
	}
	body {
	line-height: 1;
	}
	ol, ul {
	list-style: none;
	}
	blockquote, q {
	quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	content: '';
	content: none;
	}
	table {
	border-collapse: collapse;
	border-spacing: 0;
	}

	html {
	overflow-x: hidden;
	}

	#space-body {
	position: relative;
	width: 100%;
	background-image: url('http://i.imgur.com/wYcYMtk.png');
	/background-color: rgba(2,2,2,0.9);/
	height: 3000px;
	}

	#sun {
	margin: 0 auto;
	height: 0px;
	}

	#sun img {
	width: 100%;
	margin-top:-50%;
	}

	#earth {
	position: absolute;
	top: 1400px;
	width: 30%;
	left: 50%;
	margin-left: -15%;

	}

	#earth img {
	width: 100%;
	margin: 0 auto;
	display: block;
	}

	.satellite {
	position: absolute;
	top: 1000px;
	width: 300px;
	height: 200px;
	left: 50%;
	margin-left: -15%;
	background-image:url('http://www.spacepretzel.com/pics/satellite.png');
	background-repeat:no-repeat;
	background-position:center;
	background-size: 300px 200px;
	}
	#sun {
	border: 1px solid black;
	/-webkit-transform:rotate(120deg);/
	}

	</style>
	</head>

	<body>
	<div id="space-body">
	<div class="planet" id="sun">
	<img src="http://th00.deviantart.net/fs70/PRE/i/2010/266/7/9/golden_planet_sun_png_by_ravenmaddartwork-d2zauun.png">
	</div>
	<div id="moveMe" class="satellite">
	<!-- <img src="../images/satellite.png">
	--> </div>
	<div class="planet" id="earth">
	<img src="http://th00.deviantart.net/fs71/PRE/i/2010/266/b/e/strange_planet_png_by_ravenmaddartwork-d2zau51.png">
	</div>
	</div>

	<script type="text/javascript">
	// var s = skrollr.init();


	// SUN ANIMATION
	// SUN ANIMATION
	$(document).ready(function sunAnimation() {
	$("#sun").
	animate({rotate:'+=360deg'},30000, sunAnimation);
	$("#earth").
	animate({rotate:'+=360deg'},30000, sunAnimation);
	});

	</script>

	<script type="text/javascript">
	var ElementRevolver = (function() {

	function getPosition(settings, ellapsedTime) {
	var angle = getAngle(settings, ellapsedTime);
	return {
	x: Math.round(settings.center.x + (800) * Math.cos(angle)),
	y: Math.round(settings.center.y + (800) * Math.sin(angle))
	};
	}

	function getAngle(settings, ellapsedTime) {
	return ellapsedTime / settings.interval * 2 * Math.PI * settings.direction - settings.startPositionRad;
	}

	function start(id, settings) {
	var el = document.getElementById(id),
	startTime = (new Date()).getTime(),
	width = el.offsetWidth,
	height = el.offsetHeight;
	if(el['#rev:tm'] !== null) stop(id);
	el.style.position = settings.cssPosition \|\| 'absolute';
	if(!settings.startPositionRad) settings.startPositionRad = settings.startPositionDeg / 180 * Math.PI;
	el['#rev:tm'] = setInterval(function() {
	var pos = getPosition(settings, (new Date()).getTime() - startTime);
	el.style.left = (pos.x - Math.round(width / 2)) + 'px';
	el.style.top = (pos.y - Math.round(height / 2)) + 'px';
	}, settings.updateInterval);
	if(settings.iterations > -1) setTimeout(function() {
	stop(id);
	}, settings.iterations * settings.interval);
	}

	function stop(id) {
	var el = document.getElementById(id);
	if(el['#rev:tm'] === null) return;
	clearInterval(el['#rev:tm']);
	el['#rev:tm'] = null;
	}

	return {
	start: start,
	stop: stop
	};

	})();

	ElementRevolver.start('moveMe', {
	radius: 1500,
	center: { x: 750, y: 000 },
	// time in milliseconds for one revolution
	interval: 19000,
	// direction = 1 for clockwise, -1 for counterclockwise
	direction: 1,
	// number of times to animate the revolution (-1 for infinite)
	iterations: -1,
	// startPosition can be a degree angle
	// (0 = right, 90 = top, 180 = left, 270 = bottom)
	startPositionDeg: 90,
	// how often (in milliseconds) the position of the
	// circle should be attempted to be updated
	updateInterval: 50
	});


	</script>
	</body>

	</html>