masaeedu · October 5, 2015 05:51
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>

        <style>
            /* Colors */
            body {
                 background: url(http://i.imgur.com/aZty7Mq.png);
                 animation: mymove 4s linear infinite;
                 -webkit-animation: mymove 4s linear infinite;
                 -moz-animation: mymove 4s linear infinite;
            }
            @keyframes mymove {
            	0% { background-position: 0 0; }
            	50% { background-position: 40% 0; }
            }
            #sun {
                position: absolute;
                width: 300px;
                height: 300px;
                top: 30%;
                left: 10%;
            }
        </style>
        
        <html>
        <body>
                <img id="sun" src="http://i.imgur.com/DGkZYZQ.png">
        </body>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script>
 var width = 300;
 var sun = $("#sun");

 sun.draggable({
 	axis: "x",
 	drag: function() {
 		var x = sun.offset().left + (width / 2);
 		var total = $(window).width();
 		
 		var heightPct = Math.pow((total/2) - x, 2) / Math.pow($(window).width() / 2, 2);
 		console.log(x, $(window).width(), heightPct * 100);
 		this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";
 	}
 });
        </script>
        </html>
	<!DOCTYPE html>

	<style>
	/* Colors */
	body {
	background: url(http://i.imgur.com/aZty7Mq.png);
	animation: mymove 4s linear infinite;
	-webkit-animation: mymove 4s linear infinite;
	-moz-animation: mymove 4s linear infinite;
	}
	@keyframes mymove {
	0% { background-position: 0 0; }
	50% { background-position: 40% 0; }
	}
	#sun {
	position: absolute;
	width: 300px;
	height: 300px;
	top: 30%;
	left: 10%;
	}
	</style>

	<html>
	<body>
	<img id="sun" src="http://i.imgur.com/DGkZYZQ.png">
	</body>
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script>
	var width = 300;
	var sun = $("#sun");

	sun.draggable({
	axis: "x",
	drag: function() {
	var x = sun.offset().left + (width / 2);
	var total = $(window).width();

	var heightPct = Math.pow((total/2) - x, 2) / Math.pow($(window).width() / 2, 2);
	console.log(x, $(window).width(), heightPct * 100);
	this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";
	}
	});
	</script>
	</html>