• Wednesday , 13 December 2017

JavaScript animation tutorial HTML CSS transform rotate image spin smooth logo

Code Canyon



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

3d Ocean

Related Posts

36 Comments

  1. Dat Nguyen
    July 4, 2017 at 17:52

    Thanks! It worked!

  2. Hekler
    July 4, 2017 at 17:52

    how do i do it with multiple cogs

  3. madsxcva
    July 4, 2017 at 17:52

    dem stupid browsers lol

  4. happy angel
    July 4, 2017 at 17:52

    can you add a button that can start or stop in that system??

  5. Papageiplay
    July 4, 2017 at 17:52

    Can you add an random duration for the spinner? I mean for example that it rotates for 3,4 or 5 seconds.

  6. Mathew i
    July 4, 2017 at 17:52

    Can somebody explain this
    setTimeout('rotateAnimation(''+element+'','+speed+')', speed);

  7. AcornCottage:School~House
    July 4, 2017 at 17:52

    I copied everything you did and it doesn't work. :/

  8. Umar Darveesh
    July 4, 2017 at 17:52

    Hi, how can I stop the spinning after 359 degree completed?

  9. alfonso payra
    July 4, 2017 at 17:52

    is it possible to make the rotation with two fingers touch?

  10. Joe Salaz
    July 4, 2017 at 17:52

    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

  11. edfad3
    July 4, 2017 at 17:52

    really good video ­čÖé

  12. Jay White
    July 4, 2017 at 17:52

    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. Nicolas Fuchs
    July 4, 2017 at 17:52

    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

  14. The Blu Programme
    July 4, 2017 at 17:52

    What do you put in CSS?

  15. JC Lee
    July 4, 2017 at 17:52

    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. 

  16. Fasting4Fitness
    July 4, 2017 at 17:52

    can you tell me why this code has to be INLINE JAVASCRIPT and you can't write the function in a separate JS doc and call the function in the separate JS doc as well.  

  17. trsk
    July 4, 2017 at 17:52

    6:41 lol

  18. Kaye BT
    July 4, 2017 at 17:52

    pretty cool

  19. Nithin R.
    July 4, 2017 at 17:52

    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>

  20. John Ramos
    July 4, 2017 at 17:52

    can u make tutorial how do make a 360 deg 3d image like product viewer. thanks

  21. Dallas Lones
    July 4, 2017 at 17:52

    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. ­čÖé

  22. end of ever
    July 4, 2017 at 17:52

    Thank you very much, you're a great teacher!

  23. Michele Robinson-Wright
    July 4, 2017 at 17:52

    can you be able to control it with click of a mouse instead of constant rotation?

  24. SD Neeve
    July 4, 2017 at 17:52

    What is going on!! I followed the code exactly and my orb spins around the whole page and not in situ like your cog? Why!!

  25. Xin Chen
    July 4, 2017 at 17:52

    Hmm.. I got this working in Chrome, but Safari not working. Any helps?

  26. redleome
    July 4, 2017 at 17:52

    I'm guessing that he's using dreamweaver

  27. Jake Patterson
    July 4, 2017 at 17:52

    What program are you editing in? I'm using notepad ++ at the moment, is there anything better? Thanks and great video!

  28. whitetiger0707070
    July 4, 2017 at 17:52

    You explained this very well,I just did it with the google logo

  29. Edgar Diaz
    July 4, 2017 at 17:52

    thank you… I will have to use this sometime

  30. leslie1906
    July 4, 2017 at 17:52

    just simply awesome man!

  31. Hamad khalifa
    July 4, 2017 at 17:52

    Keep up the good videos man!

  32. Bosco Mabutao
    July 4, 2017 at 17:52

    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?

  33. Bosco Mabutao
    July 4, 2017 at 17:52

    Just got schooled ­čÖé

  34. Martin Markovi─ç
    July 4, 2017 at 17:52

    Wow great material, thanks a lot.

  35. Munrid
    July 4, 2017 at 17:52

    Thanks Adam!

  36. Suman Thapa
    July 4, 2017 at 17:52

    great

Leave A Comment

You must be logged in to post a comment.