How To Animate A Picture In Javascript

JavaScript - Animation

You tin can utilize JavaScript to create a circuitous animation having, only not limited to, the post-obit elements −

Fireworks
Fade Event
Curl-in or Whorl-out
Page-in or Page-out
Object movements

You might be interested in existing JavaScript based animation library: Script.Aculo.us.

This tutorial provides a basic understanding of how to employ JavaScript to create an animation.

JavaScript can exist 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 provides the following two functions to exist frequently used in animation programs.

setTimeout( function, duration) − This role calls office afterward duration milliseconds from at present.
setInterval(function, duration) − This function calls function after every duration milliseconds.
clearTimeout(setTimeout_variable) − This function calls clears any timer gear up past the setTimeout() functions.

JavaScript tin too set a number of attributes of a DOM object including its position on the screen. Yous tin set up top and left attribute of an object to position it anywhere on the screen. Here is its syntax.

// Fix distance from left edge of the screen. object.way.left = distance in pixels or points;   or  // Prepare distance from elevation edge of the screen. object.style.top = distance in pixels or points;

Transmission Blitheness

So allow'southward implement one simple animation using DOM object properties and JavaScript functions equally follows. The following list contains different DOM methods.

Nosotros are using the JavaScript function getElementById() to get a DOM object and then assigning it to a global variable imgObj.
We take defined an initialization role init() to initialize imgObj where we have set up its position and left attributes.
We are calling initialization part at the time of window load.
Finally, we are calling moveRight() part to increase the left distance by 10 pixels. You could as well ready it to a negative value to move it to the left side.

Example

Try the post-obit example.

<html>       <head>       <championship>JavaScript Animation</title>             <script type = "text/javascript">          <!--             var imgObj = null;                          part init() {                imgObj = document.getElementById('myImage');                imgObj.fashion.position= 'relative';                 imgObj.style.left = '0px';              }             function moveRight() {                imgObj.mode.left = parseInt(imgObj.style.left) + 10 + 'px';             }                          window.onload = init;          //-->       </script>    </caput>        <body>          <form>          <img id = "myImage" src = "/images/html.gif" />          <p>Click button beneath to motility the prototype to right</p>          <input type = "button" value = "Click Me" onclick = "moveRight();" />       </form>          </trunk> </html>

Output

Automatic Blitheness

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

Here we take added more methods. And then let'southward run into what is new here −

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

Example

Try the post-obit example code.

<html>       <caput>       <title>JavaScript Blitheness</championship>             <script type = "text/javascript">          <!--             var imgObj = null;             var animate ;                          office init() {                imgObj = document.getElementById('myImage');                imgObj.style.position= 'relative';                 imgObj.style.left = '0px';              }             function moveRight() {                imgObj.manner.left = parseInt(imgObj.style.left) + 10 + 'px';                animate = setTimeout(moveRight,20);    // phone call moveRight in 20msec             }             function stop() {                clearTimeout(breathing);                imgObj.style.left = '0px';              }                          window.onload = init;          //-->       </script>    </head>        <torso>          <form>          <img id = "myImage" src = "/images/html.gif" />          <p>Click the buttons below to handle blitheness</p>          <input type = "button" value = "Start" onclick = "moveRight();" />          <input type = "button" value = "Cease" onclick = "stop();" />       </form>          </body> </html>

Rollover with a Mouse Result

Hither is a unproblematic example showing image rollover with a mouse event.

Allow'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 prototype object. If the paradigm object is unavailable, this cake 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 prototype file called /images/html.gif.
Similarly, we have created image2 object and assigned /images/http.gif in this object.
The # (hash marking) disables the link and so that the browser does non effort 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 effect handler is triggered when the user's mouse moves away from the link (image).
When the mouse moves over the epitome, the HTTP image changes from the commencement image to the 2nd i. When the mouse is moved away from the image, the original image is displayed.
When the mouse is moved abroad from the link, the initial image html.gif will reappear on the screen.

<html>        <head>       <title>Rollover with a Mouse Events</title>              <script type = "text/javascript">          <!--             if(document.images) {                var image1 = new Epitome();     // Preload an image                image1.src = "/images/html.gif";                var image2 = new Image();     // Preload second image                image2.src = "/images/http.gif";             }          //-->       </script>    </head>        <body>       <p>Move your mouse over the paradigm to see the issue</p>              <a href = "#" onMouseOver = "document.myImage.src = image2.src;"          onMouseOut = "certificate.myImage.src = image1.src;">          <img name = "myImage" src = "/images/html.gif" />       </a>    </body> </html>