Turn Wheel with Mouse/Touch

by techsin

HTML

<div class="cont">
    <img src="http://simpleicon.com/wp-content/uploads/gear.png" alt="" id='gear'>
<p id="txt"></p>
</div>

CSS

html, body { height: 100%; width: 100%; border:0px solid black; margin: 0; padding: 0; overflow: hidden; }

img {
    
    display: block;
    margin:auto;
}
p {
    width: 300px;
    text-align: center;
    margin: auto;
}
.cont {
    margin-top:-75px;
    position: relative;
    top: 50%;
}

JavaScript

var a=0, topSpeed = 20, deg=0, txt, removeTxt;
var delta=0, pos=0;
var img = document.getElementById('gear');


txt = document.getElementById('txt');

window.addEventListener('mousewheel',work);
window.addEventListener("touchmove", handleMove, false);
window.addEventListener("touchstart", handleMove2, false);

animate();

function work(e) {
    if (Math.abs(a)<topSpeed)
        a = a + ((e.wheelDelta/1000) * topSpeed);
    else {
       txt.textContent = "You've reached the Top Speed!!";
       clearTimeout(removeTxt);
       removeTxt=null;
    }

    removeTxt= removeTxt || setTimeout(function(){txt.textContent='';},500);
}

function animate() {
    a = +(a*.95).toFixed(2);
    if (Math.abs(a)<1) a=0;
    deg = (deg+a) % 360;
    img.style.transform = 'rotate('+deg+'deg)';
    requestAnimationFrame(animate);
}

function handleMove(e) {
    e.preventDefault();
    delta = e.touches[0].clientY - pos;
    pos = e.touches[0].clientY;
    work({wheelDelta:delta*3});
    return false;
}

function handleMove2(e) {
    pos = e.touches[0].clientY;
    launchFullscreen(document.body);
}



function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}