AniMate bY Javascript : JavaScript

To make the webpage dynamic we use animation. This animation can be implemented using both CSS and JavaScript. Here's how to use JavaScript animation in webpage.

How does it work?

The idea behind the JavaScript-based animation is fairly simple, a number of DOM elements (< /img>, < /div > or otherwise) are moved around the page according to some sort of pattern determined by a logical equation or function.

You can use JavaScript to create a complex animation having following elements,

• Fireworks
• Fade effect
• Roll-in or Roll-out
• Page-in or Page-out
• Object movement

An existing JavaScript animation library

JavaScript provides the following two functions to be frequently used in animation programs.

• setTimeout( function, duration) − This function calls function after duration milliseconds from now.
• setInterval(function, duration) − This function calls function after every durationmilliseconds.
• clearTimeout(setTimeout_variable) − This function calls clears any timer set by the setTimeout() functions.

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.

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points;

or

// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

Manual Animation

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 initialize imgObj where we have set its position and left attributes.

We are calling initialization function at the time of window load.

Finally, we are calling moveRight() function to increase the left distance by 10 pixels. You could also set it to a negative value to move it to the left side.

Click here to get the code!

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() as follows −

Here we have added more methods. So let's see what is new here −

• The moveRight() function is calling setTimeout() function to set the position of imgObj.
• We have added a new function stop() to clear the timer set by setTimeout() function and to set the object at its initial position.

Click here to get the code!

Click the buttons below to handle animation

Rollover with a Mouse Event

Here is a simple example showing image rollover with a mouse event.

Let's see what we are using in the following example −

• At the time of loading this page, the ‘if’ statement checks for the existence of the image object. If the image object is unavailable, this block will not be executed.
• The Image() constructor creates and preloads a new image object called image1.
• The src property is assigned the name of the external image file called /images/html.gif.
• Similarly, we have created image2 object and assigned /images/http.gif in this object.
• The # (hash mark) disables the link so that the browser does not try to go to a URL when clicked. This link is an image.
• The onMouseOver event handler is triggered when the user's mouse moves onto the link, and the onMouseOut event handler is triggered when the user's mouse moves away from the link (image).
• When the mouse moves over the image, the HTTP image changes from the first image to the second one. When the mouse is moved away from the image, the original image is displayed.
• When the mouse is moved away from the link, the initial image html.gif will reappear on the screen.

Move your mouse over the image to see the result:

Click here to get the code!

Learn Web Technologies!