internet Brothers internet brothers logo
Still Jeff
29th of June 2000

Layer Animation

 

     Object layers can be moved smoothly using DHTML to create an animation effect. My picture scrolls from left to right across table cells to reveal the heading text. In this tip, I'll set up the three components needed to execute this technique. First, a style sheet defines the layers:

<STYLE type="text/css">
<!--
.moveimage { position:relative;
     left:0; top:0; z-index:2 }
.hiddentext { position:relative;
     left:0; top:-80; z-index:1 }
-->
</STYLE>

     Notice the relative positioning of the elements that comprise the layers. The rationale will become apparent when we get to the HTML division containers. The next component of this effect is the JavaScript code to execute the animation:

<SCRIPT language="JavaScript">
<!--
function moveit(spot)
  {
  if (document.layers)
    {
    var picture=document.image1;
    if (spot<420)
    {
    picture.left= spot;
    spot+=5;
    setTimeout('moveit('+spot+')',50);
    }
    }
   if (document.all)
    {
    var picture=document.all.image1.style;
    if (spot<420)
    {
    picture.left= spot;
    spot+=5;
    setTimeout('moveit('+spot+')',50);
    }
    }
  }
//-->
</SCRIPT>

     The procedure for Netscape and Internet Explorer is a little different, but the main theme is the same. Grab the "left" property of the object from its style sheet and add a set number to it (in this case 5). It repeats until reaching 420 pixels from the left. Also, this takes a parameter called spot, which will be the same as the initial relative left position of the image. Repeat every 50 milliseconds.

     Finally, the HTML portion of the animation. Here, we set the animation in motion by calling the moveit() function at page load. The parameter (0) is sent, corresponding to the left positioning of the image layer from its style sheet properties. The two DIV sections place the image and the text on the page, along with the style sheet classes they will use.

<body onload="moveit(0)">

<DIV ID="image1" class="moveimage">
  <IMG SRC="jeffv4gs.jpg">
</DIV>

<DIV class="hiddentext">
  Whatever text you choose.
</DIV>

     Okay? Layer animation is relatively simple and painless, but you may ask, "What can I use it for?" Well, how about something like an interactive quiz. Instead of starting the animation at page load, assign anchor tags to multiple images, then have your visitor click the one they believe to be the right answer. Call the moveit function when the image is clicked to reveal whether they made the correct choice. Basically, just use your imagination and have fun.

 

 

 

 

IB Community

Interviews

Lucid Confusion

IB Presents

Inspirations

IB Helpware

<<   <   ABD   >   >>

 


 

Support the Digital Divas

 

net.weblogs.com
...an experiment in freeform discourse

 

 

Internet Brothers selected among World's Best Web Sites

 

 

IB Community

Interviews

Lucid Confusion

IB Presents

Inspirations

IB Helpware

 

 

Archives

top       

Home     Community     Confusion     Awards     Links     Helpware

Copyright 1997-2000 Internet Brothers. Not that you'd want any of it.