Skip to content

Instantly share code, notes, and snippets.

@smuniza1

smuniza1/gist:043c9561e1125186757c

Created November 1, 2015 01:23
Show Gist options
  • Save smuniza1/043c9561e1125186757c to your computer and use it in GitHub Desktop.
Save smuniza1/043c9561e1125186757c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment