How to rotate an image back and forth with JavaScript

Question

I am trying to create a website and on the website I want the faces to rotate to certain point and then rotate back in the opposite direction until a certain point, I would like it if they could keep doing this forever but I can only get it to do a full rotation forever does anyone know how to fix this?

This is my HTML code:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BSDC</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <script>    
        var looper;
        var degrees = 0;
        function rotateAnimation(el,speed){
            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);
            degrees++;
            if(degrees > 359){
                degrees = 1;
            }
            document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
        }
    </script>
</head>
<body>
    <img id="Dave" src="Images/Dave.png"/>
    <script>rotateAnimation("Dave",30);</script>
    <img id="Andy" src="Images/Andy.png" />
    <script>rotateAnimation("Andy",30);</script>
    <img id="Dan" src="Images/Dan.png" />
    <script>rotateAnimation("Dan",30);</script>
    <img id="Nico" src="Images/Nico.png" />
    <script>rotateAnimation("Nico",30);</script>
</body>
</html>

And this is my CSS code

body {
    font-family: Arial, sans-serif;
    background-image: url("Images/BSDC.png");
    background-repeat: no-repeat;
}
#Dave {
    position: absolute;
    margin-left: 3%;
    margin-top: 3%;
}
#Andy {
    margin-left: 3%;
    margin-top: 35%;
    position: absolute;
}
#Dan {
    margin-left: 85%;
    margin-top: 3%;
    position: absolute;
}
#Nico {
    margin-left: 85%;
    margin-top: 35%;
    position: absolute;
}

Are you familiar with css animations at all? You don't need any js for this. — Shan Robertson
– Shan Robertson, Commented Jun 16, 2015 at 23:45

Shan Robertson · Accepted Answer · 2015-06-16 23:52:28Z

You can do this all with CSS animation. Check out this jsFiddle

the browser prefixes are annoying... and if anybody knows if this can be simplified please comment. But this is the concept, you set an animation on your element:

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

and then you define your animation, you can do any property changes and make as many steps in it as possible, i just used basic values (0, 25, 50 100)

@keyframes NAME-YOUR-ANIMATION {
  0%   { transform: rotate(0deg); }
  25% { transform: rotate(45deg); }
  50% { transform: rotate(-45deg); }
  100% { transform: rotate(0deg); }
}

You can read up on this stuff on MDN

Collectives™ on Stack Overflow

How to rotate an image back and forth with JavaScript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related