Richard's JavaScript Tutorials

Updated 07/18/14

Home
Animation
precachedImages
digitalClock
Object Tag (Audio)
Cookies.htm
Math_Object
Using CSS
The Style Object
Client_Info
customObject
functions
UsingArrays
comments
concatenation
documentwrite
ifelse
Loops
forms
Strings
variables

 

Object animation with JavaScript

This section will demonstrate a few ways to animate an object using JavaScript. You can move objects on a web page using an event or right when the page loads. I'll demonstrate a circle script and a slide script.


Circle Script

This script calls the RotateCircle() function when the page loads and starts the rotation of the image immediately as you can see below.

circle











Beautiful now let's see how it is done, here is the code:

 <head><script type="text/javascript">

// This function gets the image by id the location of the image is
//passed using variables x and y
function placeIt(id, x, y)
{
var object = document.getElementById(id);
object.style.left = x + 'px';
object.style.top = y + 'px';
}

// This function actually starts the rotation of the image.
// distance2 is the radius of the circle and degree2 is the incrementation
//On each iteration  the angle is incremented then the setTimeout() function
//is used to set the time of each iteration.
var degree2 = 0;
function RotateCircle()
{
distance2 = 50;
degree2 += 10;

// This statement converts degrees to radians. JavaScript uses radians as opposed to //degrees when working with angles.
x = distance2 * Math.cos(degree2 * Math.PI / 180);
y = distance2 * Math.sin(degree2 * Math.PI / 180);
xOffset = 100;
yOffset = 100;
placeIt('circ', x + xOffset, y + yOffset);
setTimeout('RotateCircle();' ,50);
}
</script></head>

// This starts the first iteration of the rotation
<body onload="RotateCircle();">
<div style="position:relative;">
<img id="circ" src="redskinsLogo.jpg" width="53" height="52" alt="circle" style="position:absolute;"></div></body>


Slide Script

This is a simple script that will slide an image to the right a specified amount of pixels on the web page. Check it out below:






Now here is the code for the script:

 <head><title>Moving an Image</title>
//This is a simple script use the Hmove variable to set the initial position of the image.
//Then increment the distance of the image from the left of the page.
<script type="text/javascript"><!--
Hmove=150;
function moveObjRight(obj)
{
obj.style.left=Hmove;
Hmove+=2;
if(Hmove<100)
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
}
//--></script><body>
// The element is identified by its id you can also use getElementById
<p><img id=JSI style="z-index: 0; left: -100px; position: absolute; top: 50px"
height=32 width=101 align=baseline border=0 hspace=0 src="redskinsLogo.jpg"></p>
<p>
<script type="text/javascript"><!--
moveObjRight(JSI);
//--></script></p></body>


Now you can try creating your own animation JavaScript. For questions using this script or any other script on this site contact: JavaScript@cayemay.com

 

Home

This site was last updated 07/18/14