D4mations.com

JavaScript animation tutorial HTML CSS transform rotate image spin smooth logo



Lesson Code: http://www.developphp.com/video/JavaScript/Transform-Rotate-Image-Spin-Smooth-Animation-Tutorial
Learn to program any CSS property animations you want using JavaScript and the CSS3 transform property, and just a few lines of code. JavaScript offers your animations more flexibility regarding user interactivity with your animations. CSS3 alone cannot offer you all of the DOM event handlers that are useful for programming advanced interactivity with the animated elements.

Original source

d4mer

, , , , , , , , ,

36 responses to “JavaScript animation tutorial HTML CSS transform rotate image spin smooth logo”

  10. Hey Adam. I've been trying to find a video tutorial about how to animate any type of image,like a png or even a gif image, with javaScript. The type of animation I am looking for is animating an image across a background image from left to right. This animation would start when page onLoad, and the png img will start moving from left to right-—->right from the beginning of the background img to the end of it. And also, could that image be a gif animated image?  I don't know if I've explained this in a way easy to understand, but if you could help me with this, I am subscribed to your channel and I am sure you can see my email address. Please, email me so that I can explain better what I am trying to accomplish. Thank you

  12. Hey since it's been about 2 years since this vid has posted, are all of the else if statements still needed? Where can I ascertain the answer to this and similar questions so I don't have to ignorantly (dumbly) ask again? Bless.

  13. Hi,

    The syntax of the setTimeout function would be better understood if it was written like this :
    looper = setTimeout("rotateAnimation(' " + el + " ' , " + speed + ")" , speed);
    " and ' are the same in javascript. You don't use the so it's easier 🙂

    Hope it helps

  15. What are we passing into the rotateAnimation function? 
    "rotate("+degrees+"deg)";   Why are there " + "s? What is this called?
    Same with:
    setTimeout('rotateAnimation(''+el+'','+speed+')',speed);
    The brackets seem so arbitrary. 

  19. Didn't work, here is my code for what you did, tell me if you see any major mistakes: <!DOCTYPE html>
    <html>
    <head>
    <script>
    var looper;
    var degrees = 0;
    function rotateAnimation(el,speed){
        var computer = document.getElementById(el);
    if(navigator.userAgent.match("Chrome")){
       computer.style.WebkitTransform = "rotate("+degrees+"deg")";
    } else if(navigator.userAgent.match("Firefox")){
       computer.style.MozTransform = "rotate("+degrees+"deg")";
    }else if(navigator.userAgent.match("MSIE")){
       computer.style.msTransform = "rotate("+degrees+"deg")";
    }else if(navigator.userAgent.match("Opera")){
       computer.style.OTransform = "rotate("+degrees+"deg")";
    }else{
       computer.style.MozTransform = "rotate("+degrees+"deg")";
    }
    looper = setTimeout('rotateAniamtion(''+el+'','+speed+')',speed);
    degrees++;
    if(degrees > 359) {
       degrees = 1;
    }
    document.getElementById("status").innerHTML = "rotate(+degrees+"deg")";
    }

    </script>
    </head>
    <body>
    <img id="img1" src="computer.jpg" alt="computer">
    <script>rotateAnimation("img1",20);</script>
    <h2 style="width:150px;" id="status"></h2>

    </body>
    </html>

  21. Could you possibly leave a description of how we could pass in a variable with the setTimeout? I'm trying to get it to work with multiple elements and I can't figure out how to persist the degrees counter. 🙂

  32. Considering the fact that it takes like a millisecond or so delay to reset the animation when it reaches the uppermost value, isn't it better to skip the last value (360 for the clockwise rotation and -360 anticlockwise to 159 and -159 degrees respectively to smoothen the rotation?

Leave a Reply