LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



10%
CSS
body {
  margin: 0;
  height: 100vh;
  background: hsl(194, 66%, 49%);
  overflow: hidden;
  font-family: Inconsolata,sans-serif;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.circle {
  position: absolute;
  width: 150px;
  height: 150px;
  margin: -75px;
  background: red;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}

#sun {
  background: #ffff77;
  box-shadow: 0 0 50px #ffff77;
}

#moon {
  background: #222;
  left: 50%;
}

#perc {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  margin-top: 110px;
  color: white;
  pointer-events: none;
}
JS
//Another contribution to the great Eclipse/Volume circlejerk

var moon=document.getElementById("moon"),
    parc=document.getElementById("perc"),
    audio=document.getElementById("audio"),
    dragging=false,
    radius=75,
    area=Math.PI*radius*radius,
    offs=[0,0];

function init(){
  moon.addEventListener("mousedown",selectMoon);
  moon.addEventListener("touchstart",selectMoon);
  document.body.addEventListener("mousemove",moveMoon);
  document.body.addEventListener("touchmove",moveMoon);
  document.body.addEventListener("mouseup",dropMoon);
  document.body.addEventListener("touchend",dropMoon);
  setMoonData(window.innerWidth/2+radius*2.5,window.innerHeight/2);
  audio.play();
}

function selectMoon(evt){
  dragging=true;
  var coords=getCoords(evt),
      bcr=moon.getBoundingClientRect();
  offs=[coords[0]-bcr.left-radius,coords[1]-bcr.top-radius];
}

function moveMoon(evt){
  if (!dragging)
    return;
  var coords=getCoords(evt);
  setMoonData(coords[0]-offs[0],coords[1]-offs[1]);
}

function setMoonData(x,y){
  moon.style.left=x/window.innerWidth*100+"%";
  moon.style.top=y/window.innerHeight*100+"%";
  
  var offset=Math.hypot(x-window.innerWidth/2,y-window.innerHeight/2),
      sector=Math.acos((offset/2)/radius)/Math.PI,
      triangle=Math.sqrt(radius*radius-offset*offset/4)*(offset/2),
      overlap=(area*sector-triangle)*2/area || 0,
      opacity=Math.max(400-offset,0)/1000,
      expOverlap=Math.pow(overlap,4);
  
  //Bling bling
  moon.style.boxShadow="inset "+(x-window.innerWidth/2)/10+"px "+(y-window.innerHeight/2)/10+"px 50px rgba(255, 255, 119, "+opacity+")";
  moon.style.background="hsl(194, 56%, "+(1-expOverlap)*60+"%)";
  perc.innerHTML="Volume: "+(overlap*100).toPrecision(4)+"%";
  document.body.style.background="hsl("+(194+Math.floor(166*expOverlap))+", 66%, "+(1-expOverlap)*50+"%)";
  
  //Oh yeah, set the volume, I guess.
  audio.volume=overlap;
}

function dropMoon(){
  dragging=false;
}

function getCoords(evt){
  return [(evt.touches || [evt])[0].clientX,(evt.touches || [evt])[0].clientY];
}

Math.hypot=function(a,b){
  return Math.sqrt(a*a+b*b);
};

init();
Term
Mon, 11/27/2017 - 21:28

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv