How to implement basic Animation in JavaScript?

JavascriptWeb DevelopmentFront End Technology

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>
raja
Published on 25-Jan-2018 08:06:21
Advertisements