Animating Elements with DHTML

I. Simple Animation Techniques

By combining JavaScript with CSS absolute positioning, you can dynamically and procedurally change the position of elements on the page. Here for instance is a very simple script that moves a certain DIV 5 pixels to the left:

  leftSpot = myDiv.style.posLeft
  myDiv.style.posLeft = leftSpot+5;

In this example, the terms leftSpot and myDiv are arbitrary names and could be replaced with anything you like. The DIV in question has the attribute id="myDiv".

The posLeft property is exposed for any DIV whose in-line style or stylesheet rule contains position: absolute (you can't use this property unless the DIV is absolutely positioned). The similar property posTop indicates the vertical location of any absolutely-positioned DIV.

If you attach the simple script here to a button or HTML/JavaScript link, your DIV will scoot 5 pixels to the left on each click (even long after it passes off the screen). But suppose you wanted to do something more visually impressive, such as sliding the DIV steadily and smoothly offstage, right. You might try this script:

  var leftSpot = 0;
  function scooter()
    {
      leftSpot = myDiv.style.posLeft;
      myDiv.style.posLeft = leftSpot+5;
      if(leftSpot < 900)
        {
          setTimeout("scooter()", 1);
        }
    }

In this example we initialize the leftSpot variable outside the scooter() function, making it a global variable. (JavaScript seems to require this, though it's not clear why.) We also enclose the rest of the statements within a function body. We do this so that we can re-invoke the function recursively

That recursive re-call happens so long as the value of leftspot is less than 900: that is, until the DIV has been moved 900 pixels to the left of its original position, which should be off-screen for most browsers. (You can specify a higher value if you want to be REALLY sure.)

Note that the recursive statement occurs within a setTimeout() construction. This allows enough of a delay (technically, 1 millisecond; actually a bit longer than that) to make the animation visible. If you take out this delay, faster machines will perform the operation so quickly that the DIV will simply appear to vanish.

We've used the simpler and less flexible method of referring to document objects in the examples above. If you wanted to animate multiple objects, you'd probably want to refer to them via the all collection. Here's how you might do that:

  var leftSpot = 0;
  function scooter(whichDiv)
    {
      leftSpot = 
        document.all.tags("div").item(whichDiv).style.left;
      document.all.tags("div").item(whichDiv).style.left = 
        leftSpot+5+"px";
      if(leftSpot < 900)
        {
          setTimeout("scooter()", 1);
        }
    }

We refer to the DIV in this case through the parameter whichDiv (the name is arbitrary), so that we can use the same code to refer to any absolutely-positioned DIV on the page. Note also that we must use the property left instead of leftPos, because the latter is not defined for the all collection.

These are very crude illustrations of DHTML animation effects; you can do much more interesting things, as shown in this week's demo and lab.

II. Drawbacks of HTML Animation

If you know anything about other Web animation techniques, such as animated GIF, Java, Macromedia Flash, or Director, you may already be skeptical about DHTML animation. Indeed, there are good reasons not to rely on DHTML in this regard. For one thing, the speed of the action depends all too heavily on the performance of the client processor: the same code will look smooth as silk on a fast Pentium III or IV, but like some kind of spastic disorder on a Pentium II or PowerMac. The same can be true (though less often so) with animated GIF, but it is never the case with Flash or Director, both of which use a plug-in that makes the best possible use of the system processor. Likewise, the Virtual Machine in Java can often compensate for a slow PC (though again, Java VMs vary in performance).

On the one hand, DHTML animation does not require a plug-in or Java support; and by the same token, since it uses both JavaScript and CSS, it can be integrated very cleverly into the basic structure and function of your pages. On the other hand, the latest version of Flash (5.0) makes extensive use of JavaScript, and its plugin may soon be virtually universal. You'll probably want to have DHTML animation effects in your design vocabulary, but don't expect to use them all the time.