How to:
The window shaking effect can be easily accomplished by using
JavaScript. The movement is done through javascript:window.moveBy(x,
y) function. moveBy() is a window method. It takes
two parameters, which are the x and y displacement from the current
window position.
Syntax:
window.moveBy(x, y)
Example code:
The trick to make the window shaking is to alternate the direction of x or y or both. The
unit value for x and y are the number of pixels.
Put this code nested inside the <HEAD> tag.
<SCRIPT LANGUAGE="JavaScript">
<!-- var qDuration=600;
var qCounter=0;
function quake()
{
// the horizontal displacement
var deltaX=1;
// make sure the browser support the moveBy method
if (window.moveBy)
{
for (qCounter=0; qCounter<qDuration; qCounter++)
{
// shake left
if ((qCounter%4)==0)
{
window.moveBy(deltaX, 0);
}
// shake right
else if ((qCounter%4)==2)
{
window.moveBy(-deltaX, 0);
}
// speed up or slow down every X cycles
if ((qCounter%30)==0)
{
// speed up halfway
if (qCounter<qDuration/2)
{
deltaX++;
}
// slow down after halfway of the duration
else
{
deltaX--;
}
}
}
}
}
//-->
</script>
To make the browser window shake immediately after the document is loaded, have "quake()"
function called in the BODY's "onLoad" method like below:
Caution:
-
Other than for being "cool," I can't find much
good reason to shake the browser window. Use sparingly, shaking the browser
window can annoy visitors. (I have only found one really good application
of screen shake on the net; it's at the flashchallenge.com
site.)
-
If the code is nested inside a table, then
older Netscape browsers might have problems running JavaScript code.
To be safe, put the JavaScript call outside any table.
-
Not
all browsers support the JavaScript "moveBy" method (older browsers such as Netscape 3 don't). In that case, the browser might display
ugly error message like below:
To avoid that, make sure the JavaScript version supports the "moveBy"
function. JavaScript version 1.2 should do. There are several ways
to do this. For me, I like to check whether moveBy is defined or not by
explicit testing like below:
if
(window.moveBy)
{
// shake
}
Avoid "extended hourglass"
bug. This is a "feature" that I notice in certain browser.
Whenever you click a link that calls a JavaScript function, the cursor will change
into the hourglass, and won't change back into the pointer, until the user moves
the mouse. This can be avoided by having "onClick" method always
return something.
For example, I prefer to use:
<A
HREF="javascript:myVoid()" onClick="javascript:quake(); return
true;">
instead of
<A
HREF="javascript:quake()">
and instead
of
<A HREF="#" onClick="quake()">
Note: myVoid() is a dummy function that does nothing,
like this:
