Special Effects with DHTML Rollovers - The Main Effect and Implementation
(Page 3 of 4 )
Now it’s time for the main effect function. Are you shuddering? If not, hopefully soon you will be. The Shudder function is actually very simple. It consists two variables, x and y which are random numbers. The final two lines move the shuddering image. The top and left position of the background image are erratically shifted within a set of bounds created with the random numbers and some logarithmic functions. The equation’s purpose is to shudder the image, but not too much.
function Shudder() {
var x = Math.random();
var y = Math.random();
Behindobj.top = (available_height / 2) - (145 * y) - (Math.cos(x *10) + (x * y));
Behindobj.left = (available_width / 2) - (100 * x) - (Math.sin(y *10) + (2 * y * ));
}
That is the bulk of the code explained in detail. All that is left is to assign the images to DIV tags within the body of the HTML page and initialize the functions in the proper order. Using the onLoad function within the BODY tag, the size of the screen is determined, the style sheet syntax is standardized and the style sheet variable names are instantiated. The two DIV tags associate the images with the style sheet variable that were defined in the very beginning. An onMouseMove command is placed within the top image so that the Shudder effect is called when appropriate.
<BODY BGCOLOR="BLACK" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLL="NO" onLoad="
if(is.ns4) {
available_width=innerWidth;
available_height=innerHeight;
}
else if(is.ie4) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
};
standardize(); Load_Name(); setTimeout('Position()',.01);">
<DIV ID="Central"><IMG SRC="graphics/sundunes.jpg" width="422" height="286" onmousemove="Shudder()"></DIV>
<DIV ID="Behind"><IMG SRC="graphics/sundunes_b.jpg"></DIV>
</BODY>
Next: Putting it all Together >>
More JavaScript Articles
More By Ian Felton
