Hello guys! Welcome to my new tutorial post on JavaScript. In this tutorial post, am going to be discussing about the various ways in which we can use to create animations using JavaScript.
This tutorial is a little bit more complex than the previous tutorials we have had in the past so i will suggest you read through it carefully and also pay attention to details.
You can make use of JavaScript to create a complex animation having, but not limited to the following elements -
This tutorial is a little bit more complex than the previous tutorials we have had in the past so i will suggest you read through it carefully and also pay attention to details.
You can make use of JavaScript to create a complex animation having, but not limited to the following elements -
- Fireworks
- Fade Effect
- Roll-in or Roll-out
- Page-in or Page-out
- Object Movements
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 or analytical equation.
JavaScript provides the following two functions to be frequently used in animation program.
JavaScript provides the following two functions to be frequently used in animation program.
- setTimeout(function, duration) - This function calls function after duration msec from now.
- setInterval(function, duration) - This function calls function after every duration of msec.
- clearTimeout(setTimeout_variable) - This will clear any time set by the setTimeout function.
JavaScript can also set a number of attributes of a DOM Object including it's position on the screen. You can set top and left attribute of an object to position it to position it anywhere on the screen. Below is its syntax.
// Sets distance from the left edge of the screen.
object.style.left = distance in pixels or points;
Or
// Sets distance from the top edge of the screen.
object.style.top = distance in pixels or points;
object.style.left = distance in pixels or points;
Or
// Sets distance from the top edge of the screen.
object.style.top = distance in pixels or points;
You can also read our tutorial post on: Learning JavaScript Number Object with examples
Manual Animation
Now we are going to implement one simple animation using DOM object properties and also JavaScript functions as follows. The following list below contains DOM methods.
- We are going to be making use of the JavaScript function getElementById() to get a DOM object and then assigning the gotten object to a global variable imgObj.
- We have defined an initialization function init() to initialize imgObj we're we have its position as well as its left attributes.
- We are calling initialization function at the time of window load.
- Finally we are calling the moveRight() function to increase the distance from the left by 10 pixels. You can as well set it to a negative value to move it towards the left position.
Example
Try the following example below.
<html>
<head>
<title>The JavaScript Animation</title>
<script type = "text/javascript" >
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('Image');
imgObj.style.position = 'relative';
ImgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 8 + 'px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img Id = "Image" src = "/images/html.gif" />
<p>Click the button below to move image to right.</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</form>
</body>
</html>
<head>
<title>The JavaScript Animation</title>
<script type = "text/javascript" >
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('Image');
imgObj.style.position = 'relative';
ImgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 8 + 'px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img Id = "Image" src = "/images/html.gif" />
<p>Click the button below to move image to right.</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</form>
</body>
</html>
You can also read our tutorial post on: Client-side Firm Validation in JavaScript
Automated Animation
In the above example, you will discover how an image moves to right with every click. We can as well automate this process by using JavaScript function setTimeout as follows -
Here we have added more methods. So let's see what is new here -
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 also added a new function known as stop() to clear the timer set by the setTimeout() function and to also set the object at its initial position.
Example
Try the following example below.
<html>
<head>
<title>The JavaScript Animation</title>
<script type = "text/javascript" >
<!--
var imgObj = null;
var animate;
function init() {
imgObj = document.getElementById('Image');
imgObj.style.position = 'relative';
ImgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 8 + 'px';
animate = setTimeout (moveRight, 15) ; // Call moveRight in 15 msec
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img Id = "Image" src = "/images/html.gif" />
<p>Click the button below to handle animation.</p>
<input type = "button" value = "Start" onclick = "moveRight();" />
<input type = "button" value = "Stop" onclick = "stop();" />
</form>
</body>
</html>
<head>
<title>The JavaScript Animation</title>
<script type = "text/javascript" >
<!--
var imgObj = null;
var animate;
function init() {
imgObj = document.getElementById('Image');
imgObj.style.position = 'relative';
ImgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 8 + 'px';
animate = setTimeout (moveRight, 15) ; // Call moveRight in 15 msec
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img Id = "Image" src = "/images/html.gif" />
<p>Click the button below to handle animation.</p>
<input type = "button" value = "Start" onclick = "moveRight();" />
<input type = "button" value = "Stop" onclick = "stop();" />
</form>
</body>
</html>
You can try the above code out using your text editor to see the result for yourselves and make sure the image you will be making use of will be stored in same folder with your Html files.
You can also read our tutorial post on: Understanding the W3C DOM in JavaScript
Rollover with a Mouse Event
Below is a simple example showing an image rollover with a mouse event.
Let's take a look at what we will be making use of in the following example -
Let's take a look at what we will be making use of in the following example -
- At the time when this page is been loaded, the if statement checks for existence of the image object. If the image object is unavailable, the block will not be executed.
- The image() constructor creates and preloads a new image object called image1.
- The scr property is going to be assigned the name of the external image file.
- Similarly we have created image2 object and as well 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 ever it is clicked. The 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 as soon as the user's mouse moves away from the image link.
- When the mouse moves over the image, the HTTP image changes from the first image to the second one. When the mouse is moved out of the image, the original image is displayed.
- When the mouse is moved away from the link, the initial image html.gif will be reappeared on the screen.
<html>
<head>
<title>Rollover with a Mouse Event</title>
<script type = "text/javascript" >
<!--
if ( document.images ) {
var image1 = new image(); // Preloads an image
image1.src = "/images/html.gif";
var Image2 = new image(); // Preloads second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result .</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;"
onMouseOut = "document.myImage.src = image1.src;" >
<img name = "myImage" src = "/images/html.gif" />
</a>
</body>
</html>
<head>
<title>Rollover with a Mouse Event</title>
<script type = "text/javascript" >
<!--
if ( document.images ) {
var image1 = new image(); // Preloads an image
image1.src = "/images/html.gif";
var Image2 = new image(); // Preloads second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result .</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;"
onMouseOut = "document.myImage.src = image1.src;" >
<img name = "myImage" src = "/images/html.gif" />
</a>
</body>
</html>
You can try the above code out using your text editor to see the result for yourselves and make sure the image you will be making use of will be stored in same folder with your Html files.
Alright guys! We have come to the end of this tutorial. In my next tutorial, i will be discussing about Multimedia in JavaScript.
Follow us on our various social media platforms available and also subscribe to our newsletter to get our tutorial delivered directly to your emails.
Thanks for reading and bye for now.
Alright guys! We have come to the end of this tutorial. In my next tutorial, i will be discussing about Multimedia in JavaScript.
Follow us on our various social media platforms available and also subscribe to our newsletter to get our tutorial delivered directly to your emails.
Thanks for reading and bye for now.