Javascript Tutorial

JavaScript - Animation

JavaScript can be used to move a number of DOM elements (<img />, <div> or any other HTML element) around the page according to some sort of pattern determined by a logical equation or function.

JavaScript can also set a number of attributes of a DOM object including its position on the screen. You can set top and left attribute of an object to position it anywhere on the screen. Here is its syntax.

Example

Manual Animation

So let's implement one simple animation using DOM object properties and JavaScript functions as follows. The following list contains different DOM methods.

Example

Result

JavaScript Animation

Click button below to move the image to right

Automated Animation

In the above example, we saw how an image moves to right with every click. We can automate this process by using the JavaScript function setTimeout()

Example

<html>
   
   <head>
      <title>JavaScript Animation</title>
      
      <script type="text/javascript">
         
      </script>
      
   </head>
   
   <body>
   
      <form>
         <img id="myImage" src="../img/ani.png" />
         <p>Click the buttons below to handle animation</p>
         <input type="button" value="Start" onclick="moveRight();" />
         <input type="button" value="Stop" onclick="stop();" />
      </form>
      
   </body>
</html>

Online

Menu

Example

Example

Result

JavaScript Animation

Click button below to move the image to right

Example

Result

JavaScript Animation

Click the buttons below to handle animation

Importent Links

Interview Questions

Social Contact