javascriptnetbeansweb-scripting

How can make my function rotate 360 and move up and down?


Hey guys so I'm working on animating my java script for a project, and being a newbie at java-script I have only figured out how to make my image move up and down in a set area. How can make my object "dank" also spin 360 infinitly whiles using the following code to move it up and down? Any help is appreciated!

window.addEventListener("load", function() {         
function myMove() {
   var elem = document.getElementById("dank");
   var pos = 100;
   var id = setInterval(frame, 10);
   function frame() {
        pos += 0.3;
        elem.style.top = pos + "px";
             if (Math.abs(pos) >= 250){
                   pos = 100;
                }
                frame();
            }
            } 

Solution

  • You can use elem.style.transform to rotate text. If you assign degrees to a number it'd be something like:

    elem.style.transform = "rotate(" + degrees + "deg)"

    Also you should remove "frame();", you don't need it because setInterval(frame, 10) already calls the function over and over. Having it in there might cause some recursion problems.