JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<img src="http://www.iconsdb.com/icons/preview/caribbean-blue/gear-2-xxl.png" alt="" id='gear'>
<p id="txt"></p>

CSS

img {
    display: block;
    margin:auto;
}
p {
    width: 300px;
    text-align: center;
    margin: auto;
}

JavaScript

var a=0, topSpeed = 20, deg=0, txt, removeTxt;

txt = document.getElementById('txt');

window.addEventListener('mousewheel', function(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);
});

var img = document.getElementById('gear');

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);
}

animate();