Demo: Click here to move this browser window to the left
Demo: Click here to move this browser window to the right
Demo: Click here to shake this browser window
(It's best to try the demo on non-maximized browser window.)

JavaScript Window Shake


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:

<BODY onLoad="quake()">

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:
    function 
    myVoid() { }

<< INDEX >>

  
(C)
2000 F. Permadi