onclick on : circular_arrow_button

will rotate by 90° and another click will rotate back 🙂

to see the example in action click here: https://jsfiddle.net/d5w65my2/5/

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png">
<script>
    var looper;
    var degrees = 0;
    var direction = "right"; // rotation direction
    /*
        direction = of rotation, can be 'left' or 'right'
    */

    function rotateAnimation(el, speed, direct)
    {
        if(direct !== undefined)
        {
            direction = direct;
        }

        var elem = document.getElementById(el);
        if (navigator.userAgent.match("Chrome")) {
            elem.style.WebkitTransform = "rotate(" + degrees + "deg)";
        } else if (navigator.userAgent.match("Firefox")) {
            elem.style.MozTransform = "rotate(" + degrees + "deg)";
        } else if (navigator.userAgent.match("MSIE")) {
            elem.style.msTransform = "rotate(" + degrees + "deg)";
        } else if (navigator.userAgent.match("Opera")) {
            elem.style.OTransform = "rotate(" + degrees + "deg)";
        } else {
            elem.style.transform = "rotate(" + degrees + "deg)";
        }

        looper = setTimeout('rotateAnimation(\'' + el + '\',' + speed + ')', speed);

        if(document.getElementById("status") != null)
        {
            document.getElementById("status").innerHTML = "rotate(" + degrees + "deg)";
        }

        factor = 5;
        if(direction == "left")
        {
            factor = -5;
        }

        degrees = degrees+factor;

        if(direction == "right")
        {
            if (degrees > 90) {
                clearTimeout(looper);
            }
        }

        if(direction == "left")
        {
            if (degrees < 0) {
                clearTimeout(looper);
            }
        }
    }

    function toggle(el)
    {
        elem = document.getElementById(el);
        if (elem.classList.contains('toggled')) {
            rotateAnimation(el, 5, "left");
            elem.classList.remove('toggled');
            // elem.classList.toggle("toggled");
        }
        else
        {
            rotateAnimation(el, 5, "right");
            elem.classList.add("toggled");
            // elem.classList.toggle("toggled");
        }
    }
</script>
</head>
<body>
    <div id="button" style="border: 1px solid red; position: relative; float: left;" class="">
        <img id="img1" onclick="toggle('img1');" src="images/circular_arrow_button.png" alt="cog1">
    </div>
    <h2 style="width: 200px;" id="status"></h2>
</body>
</html>

Links:

Further readings: https://www.smashingmagazine.com/2014/09/animating-without-jquery/

admin