Computer >> Computer tutorials >  >> Programming >> Javascript

How to implement basic Animation in JavaScript?


To implement basic Animation in JavaScript, use the DOM object properties and JavaScript. The following list contains different DOM methods.

  • We are using the JavaScript function getElementById() to get a DOM object and then assigning it to a global variable imgObj.
  • We have defined an initialization function init() to an initialize imgObj where we have to set its position and left attributes.
  • We are calling an initialization function at the time of window load.
  • Finally, we are calling moveRight() function to increase the left distance by 10 pixels. You could additionally set it to a negative value to move it to the left side.
<html>
   <head>
      <title>JavaScript Animation</title>
      <script>
         <!--
         var imgObj = null;
         function init() {
            imgObj = document.getElementById('myImage');
            imgObj.style.position= 'relative';
            imgObj.style.left = '0px';
         }
         function moveRight() {
            imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
         }
         window.onload =init;
         //-->
      </script>
   </head>
   <body>
      <form>
         <img id="myImage" src="/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type="button" value="Click Me" onclick="moveRight();" />
      </form>
   </body>
</html>