smuniza1/gist:043c9561e1125186757c

## gistfile1.txt
<!DOCTYPE html>

        <style>
            /* Colors */
            #container{
              width:100%;
              height:100%;
            }
            img.drag {
              position: absolute;
              opacity:-1;
              height:50%;
              transition:opacity 1s;
            }
            div.bg {
              width:100%;
              height:100%;
              position:fixed;
              top:0;
              left:0;
              background-repeat: repeat;
            }
            #day {
              animation: mymove 4s linear infinite;
            }
            @keyframes mymove {
              0% { background-position: 0 0; }
              50% { background-position: 40% 0; }
            }
        </style>

        <html>
        <body>
            <div id="container">
              <div class="bg" id="night" style="background-image:url(http://i.imgur.com/JK3hIxi.gif);"></div>
              <img class="drag" id="moon" src="http://i.imgur.com/VmFEwrH.png">
              <div class="bg" id="evening" style="background-image:url(http://i.imgur.com/YHHa2St.jpg)"></div>
              <img class="drag" id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
              <div class="bg" id="day" style="background-image:url(http://i.imgur.com/aZty7Mq.png)"></div>

              <img class="drag" 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>
    		$(function(){

        var bg = $(".bg"),
            drag = $(".drag"),
            sun = $("#sun"),
            csel = '#container';

        _init();


        function _init(){
            onDrag();
            sun.css({
                opacity:1
              })
              .draggable({
                axis: "x",
                containment: csel,
                drag:onDrag
            });
        }

        function getOpacity(Z,index){
            Z = 1 - Math.min(Math.max(0,Z),1);
            var len = bg.length;
            var A = 1,
                P = 1,
                V = -A + 1,
                x = 0,
                L = len - 1,

                opacity = A*Math.cos(P*0 + Z*Math.PI - (index*Math.PI)/L) + V;
            return opacity;
        }

        function onDrag(){
            var len = bg.length,
                total = $(csel).width(),
                min=sun.width()/2+8,
                max=total-min,
                x = sun.offset().left + (min),
                p = (x-min)/(max-min),
                w = sun.width(),
                heightPct = Math.pow((total >> 1) - x, 2) / Math.pow(total >> 1, 2),
                rounded = Math.round(heightPct * 30) + "%";

            bg.each(function(i){
                var op = getOpacity(p,i);
                $(this).css({
                    opacity:op
                });
            });

            drag.each(function(i){
                var op = getOpacity(p,i);
                $(this).css({
                    opacity:op > .5 ? 1 : 0,
                    left: sun.css("left"),
                    top: sun.css("top"),
                    marginTop: rounded
                });

            })
        }
    })
        </script>
        </html>
	<!DOCTYPE html>

	<style>
	/* Colors */
	#container{
	width:100%;
	height:100%;
	}
	img.drag {
	position: absolute;
	opacity:-1;
	height:50%;
	transition:opacity 1s;
	}
	div.bg {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background-repeat: repeat;
	}
	#day {
	animation: mymove 4s linear infinite;
	}
	@keyframes mymove {
	0% { background-position: 0 0; }
	50% { background-position: 40% 0; }
	}
	</style>

	<html>
	<body>
	<div id="container">
	<div class="bg" id="night" style="background-image:url(http://i.imgur.com/JK3hIxi.gif);"></div>
	<img class="drag" id="moon" src="http://i.imgur.com/VmFEwrH.png">
	<div class="bg" id="evening" style="background-image:url(http://i.imgur.com/YHHa2St.jpg)"></div>
	<img class="drag" id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
	<div class="bg" id="day" style="background-image:url(http://i.imgur.com/aZty7Mq.png)"></div>

	<img class="drag" 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>
	$(function(){

	var bg = $(".bg"),
	drag = $(".drag"),
	sun = $("#sun"),
	csel = '#container';

	_init();



	function _init(){
	onDrag();
	sun.css({
	opacity:1
	})
	.draggable({
	axis: "x",
	containment: csel,
	drag:onDrag
	});
	}

	function getOpacity(Z,index){
	Z = 1 - Math.min(Math.max(0,Z),1);
	var len = bg.length;
	var A = 1,
	P = 1,
	V = -A + 1,
	x = 0,
	L = len - 1,

	opacity = AMath.cos(P0 + ZMath.PI - (indexMath.PI)/L) + V;
	return opacity;
	}

	function onDrag(){
	var len = bg.length,
	total = $(csel).width(),
	min=sun.width()/2+8,
	max=total-min,
	x = sun.offset().left + (min),
	p = (x-min)/(max-min),
	w = sun.width(),
	heightPct = Math.pow((total >> 1) - x, 2) / Math.pow(total >> 1, 2),
	rounded = Math.round(heightPct * 30) + "%";

	bg.each(function(i){
	var op = getOpacity(p,i);
	$(this).css({
	opacity:op
	});
	});

	drag.each(function(i){
	var op = getOpacity(p,i);
	$(this).css({
	opacity:op > .5 ? 1 : 0,
	left: sun.css("left"),
	top: sun.css("top"),
	marginTop: rounded
	});

	})
	}
	})
	</script>
	</html>