• 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 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.
Illustration :
<head>
<title>Demo on Animation with Java script</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 have 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.