Javascript Animation

Author : Lavanya Anand

  • Animation in JavaScript can be done by changing a JavaScript on different events for different images.
  • This is done with the help of DOM elements we have. We can move these Dom elements with respect to some specified pattern
  • Also to make any object animate we would need a time frame so that the objects defined can animate/move accordingly.
  • Let’s see an example on this.


<html> <head> <title>Demo on Animaiton with Javascript</title> <style type="text/css"> #Objcar { position:absolute; left:0px; top:7em; width:6em; line-height:2em; } </style> <script type="text/javascript"> var car = null; function moveCar() { car.style.left = parseInt(car.style.left)+1+'px'; setTimeout(moveCar,15); } function start() { car = document.getElementById('Objcar'); car.style.left = '0px'; moveCar(); } window.onload = start; </script> </head> <body > <br><CENTER> <font face="Copperplate Gothic Bold" color="#008000"><h1>ANIMATION WITH JAVASCRIPT</h1></font> </CENTER><br><br><br><br> <div id="Objcar"> <img src="car1.jpg"/> </div> </body> </html>
  • In the above program, we are creating a simple HTML program where we are using JavaScript functions for moving a car form left to right
  • We are specifying the timeout for the movement of car.
  • Here we have 2 functions. One is moveCar function and the other one is start function.
  • In moveCar function we are specifying the movement of the car from left towards right.
  • setTimeout(moveCar,15) method calls the moveCar method every 15 seconds
  • Next is the start function. This would be calling an object ‘ObjCar’ which is actually a very simple box. We are placing positioning this object towards left.
  • Then we call the function moveCar function to start moving the defined object
  • window.onload = start will call the start method as and when the page loads
  • Now comes the HTML part, where in you are using a div component and calling the ObjCar object.
  • Now we are embedded a car object within the ObjCar box.
  • Save & run the page
  • Hence the stages of the output are shown below:

Here we have seen the animation using JavaScript.

All rights reserved.  Terms and Conditions