JS - IMaGe Animation

The Finished Product

How It's Done

Notice below the <script> tag within our HTML? The script must be called after the image loads.

The script takes 2 arguments. The first argument is the id of the image you want to rotate. The second argument is the speed at which you want to rotate the first argument.

Tip: the smaller the number, the faster the spin...

HTML

   <figure>
      <img id="img1" src="green-cog.png" alt="Rotating Green Gear" />
      <script type="text/javascript">rotateAnimation ("img1",60);</script>
   </figure>
   <figcaption>
      <h3>Time Setting: </h3>
      <p id="status"></p>
   </figcaption>
               

JAVASCRIPT

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