carolinux · October 26, 2015 00:00
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; }
            }
            #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%;
            }
        </style>
        
        <html>
        <body>
                <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"
        </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,
    sun = $("#sun"),
    dark = $("#dark_sun"),
    moon = $("#moon"),
    total = $(window).width()// - (moon.width()/2), //It is not necessary to calculate the width over and over again.
    // Part the whole width in thirds
    firstOfThree = (total/3)*0,
    secondOfThree = (total/3)*1,
    thirdOfThree = (total/3)*2;

 sun.draggable({
    axis: "x",
    containment: 'body',
    drag: function() {
        var x = sun.offset().left + (sun.width() / 2),
        	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) + "%";
        
        dark.css({
            left:x -(sun.width()/2),
            marginTop: heightPct * 30 + "%"
        });
        //Opacity based on the first two thirds so the last third ist reserved for the moon
        $(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){
            // If the sun is in the last third -> fade the dark sun into the moon!
                dark_opacity =  1 - ((x-thirdOfThree)/(total-x-sun.width()/2));
                //console.log(x+","+total+","+thirdOfThree+','+dark_opacity);
        	dark.css({opacity: dark_opacity});
            // Moon only visible in the last third so
            moon.css({opacity: 1});
        } else {
        	moon.css({opacity: 0});
            dark.css({opacity: 1});
        }
        
    }
 });

        </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; }
	}
	#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%;
	}
	</style>

	<html>
	<body>
	<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"
	</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,
	sun = $("#sun"),
	dark = $("#dark_sun"),
	moon = $("#moon"),
	total = $(window).width()// - (moon.width()/2), //It is not necessary to calculate the width over and over again.
	// Part the whole width in thirds
	firstOfThree = (total/3)*0,
	secondOfThree = (total/3)*1,
	thirdOfThree = (total/3)*2;

	sun.draggable({
	axis: "x",
	containment: 'body',
	drag: function() {
	var x = sun.offset().left + (sun.width() / 2),
	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) + "%";

	dark.css({
	left:x -(sun.width()/2),
	marginTop: heightPct * 30 + "%"
	});
	//Opacity based on the first two thirds so the last third ist reserved for the moon
	$(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){
	// If the sun is in the last third -> fade the dark sun into the moon!
	dark_opacity = 1 - ((x-thirdOfThree)/(total-x-sun.width()/2));
	//console.log(x+","+total+","+thirdOfThree+','+dark_opacity);
	dark.css({opacity: dark_opacity});
	// Moon only visible in the last third so
	moon.css({opacity: 1});
	} else {
	moon.css({opacity: 0});
	dark.css({opacity: 1});
	}

	}
	});

	</script>
	</html>