Skip to content

Instantly share code, notes, and snippets.

@smuniza1

smuniza1/gist:4bb1f6ec54532d787461

Created October 27, 2015 02:13
Show Gist options
  • Save smuniza1/4bb1f6ec54532d787461 to your computer and use it in GitHub Desktop.
Save smuniza1/4bb1f6ec54532d787461 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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: absolute;
top:0;
left:0;
}
#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 class="bg" id="night" src="http://i.imgur.com/JK3hIxi.gif"></div>
<div class="bg" id="day" src="http://i.imgur.com/aZty7Mq.png"></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">
</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"),
night = $("#night"),
day = $("#day"),
total = $(window).width()
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);
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment