smuniza1 · October 28, 2015 23:57
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>

        <style>
            /* Colors */
 		#moon {
 			position: absolute;
 			width: 300px;
 			height: 300px;
 			top: 20%;
 			left: 10%;
 		}
 		#dark_sun {
 			position: absolute;
 			width: 300px;
 			height: 300px;
 			top: 20%;
 			left: 10%;
 		}
 		#sun {
 			position: absolute;
 			width: 300px;
 			height: 300px;
 			top: 20%;
 			left: 10%;
 		}
 		.bg {
 			width:100%;
 			height:100%;
 			position:fixed;
 			top:0;
 			left:0;
 		}
        #evening {
            background:url("http://i.imgur.com/YHHa2St.jpg");
 			opacity:1;
 			background-repeat: repeat;
        }
 		#day {
 			background:url("http://i.imgur.com/aZty7Mq.png");
 			opacity:1;
 			background-repeat: repeat;
 			animation: mymove 4s linear infinite;
 		}
 		#night {
 			background: url(http://i.imgur.com/JK3hIxi.gif);
 			opacity:0;
 			background-repeat: repeat;
 		}
 		@keyframes mymove {
 			0% { background-position: 0 0; }
 			50% { background-position: 40% 0; }
 		}
        </style>
        
        <html>
        <body>
            <div id="container">
          <div class="bg" id="night"></div>
          <div class="bg" id="evening"></div>
          <div class="bg" id="day"></div>
          
          <img id="moon" src="http://i.imgur.com/VmFEwrH.png">
          <img id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
          <img id="sun" src="http://i.imgur.com/DGkZYZQ.png">
 </div>

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        </body>
        <script>
 		var width = 300,
 		sun = $("#sun"),
 		dark = $("#dark_sun"),
 		moon = $("#moon"),
 		night = $("#night"),
    	evening = $("#evening"),
 		day = $("#day"),
        total,
 		firstOfThree = (total/3)*0,
 		secondOfThree = (total/3)*1,
 		thirdOfThree = (total/3)*2;

 	sun.draggable({
 		axis: "x",
 		containment: 'body',
 		drag: function() {
          		total = $("#container").width()
 			var x = sun.offset().left + (sun.width() / 2),
 				heightPct = Math.pow((total / 2) - x, 2) / Math.pow($("#container").width() / 2, 2);
 		  this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";

 			dark.css({
 				left:x -(sun.width()/2),
 				marginTop: heightPct * 30 + "%"
 			});
          
          day.css("opacity",1-x/total);
 				night.css("opacity",x/total);
          
 			$(this).css({
 				opacity: (1-(x/thirdOfThree)) >=0 ? (1-(x/thirdOfThree)) : 0  ,
 				marginTop: heightPct * 30 + "%"
 			});
 			moon.css({
 				left: sun.offset().left,
 				marginTop: heightPct * 30 + "%"
 			});

 			if(x>thirdOfThree){
 				dark_opacity =  1 - ((x-thirdOfThree)/(total-x-sun.width()/2));
 				dark.css({opacity: dark_opacity});
 				moon.css({opacity: 1});
 			}
 			else {
 				moon.css({opacity: 0});
 				dark.css({opacity: 1});
 			}
 	}
 	});
        </script>
        </html>
	<!DOCTYPE html>

	<style>
	/* Colors */
	#moon {
	position: absolute;
	width: 300px;
	height: 300px;
	top: 20%;
	left: 10%;
	}
	#dark_sun {
	position: absolute;
	width: 300px;
	height: 300px;
	top: 20%;
	left: 10%;
	}
	#sun {
	position: absolute;
	width: 300px;
	height: 300px;
	top: 20%;
	left: 10%;
	}
	.bg {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	}
	#evening {
	background:url("http://i.imgur.com/YHHa2St.jpg");
	opacity:1;
	background-repeat: repeat;
	}
	#day {
	background:url("http://i.imgur.com/aZty7Mq.png");
	opacity:1;
	background-repeat: repeat;
	animation: mymove 4s linear infinite;
	}
	#night {
	background: url(http://i.imgur.com/JK3hIxi.gif);
	opacity:0;
	background-repeat: repeat;
	}
	@keyframes mymove {
	0% { background-position: 0 0; }
	50% { background-position: 40% 0; }
	}
	</style>

	<html>
	<body>
	<div id="container">
	<div class="bg" id="night"></div>
	<div class="bg" id="evening"></div>
	<div class="bg" id="day"></div>

	<img id="moon" src="http://i.imgur.com/VmFEwrH.png">
	<img id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
	<img id="sun" src="http://i.imgur.com/DGkZYZQ.png">
	</div>

	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	</body>
	<script>
	var width = 300,
	sun = $("#sun"),
	dark = $("#dark_sun"),
	moon = $("#moon"),
	night = $("#night"),
	evening = $("#evening"),
	day = $("#day"),
	total,
	firstOfThree = (total/3)*0,
	secondOfThree = (total/3)*1,
	thirdOfThree = (total/3)*2;

	sun.draggable({
	axis: "x",
	containment: 'body',
	drag: function() {
	total = $("#container").width()
	var x = sun.offset().left + (sun.width() / 2),
	heightPct = Math.pow((total / 2) - x, 2) / Math.pow($("#container").width() / 2, 2);
	this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";

	dark.css({
	left:x -(sun.width()/2),
	marginTop: heightPct * 30 + "%"
	});

	day.css("opacity",1-x/total);
	night.css("opacity",x/total);

	$(this).css({
	opacity: (1-(x/thirdOfThree)) >=0 ? (1-(x/thirdOfThree)) : 0 ,
	marginTop: heightPct * 30 + "%"
	});
	moon.css({
	left: sun.offset().left,
	marginTop: heightPct * 30 + "%"
	});

	if(x>thirdOfThree){
	dark_opacity = 1 - ((x-thirdOfThree)/(total-x-sun.width()/2));
	dark.css({opacity: dark_opacity});
	moon.css({opacity: 1});
	}
	else {
	moon.css({opacity: 0});
	dark.css({opacity: 1});
	}
	}
	});
	</script>
	</html>