2.1	Sliding Layers

Sliding is just my name for "moving layers many times". Recall the command to move a layer once:

document.layers["layer1"].left += 5;

We will use this same line again, but we'll add just a touch more. All we have to do is loop that command several times and it will appear to be an animation. There are many ways to make loops, but the best way with layers is to make a function that repeatedly calls itself.

function slidelayer() {
	if (document.layers["layer1"].left < 150) {
		document.layers["layer1"].left += 5;
		setTimeout("slidelayer()",50);
	}
}

The "if" statement in the script is used to determine how far we want the layer to move. In plain english it reads: "if the left position is less than 150 pixels, do the following...". Inside the "if" we put our code to move the layer right 5 pixels. And in the last line setTimeout() is used to to delay 50 milliseconds, and then execute the "slidelayer()" function again. This completes the loop, and we begin all over again.

In this example I will be using the following layer:

<LAYER NAME="layer1" LEFT=50 TOP=50 BGCOLOR=#FF0000 CLIP="0,0,100,100">
</LAYER>

I set the original left position to be 50 pixels. That means the the function will slide the layer a full 100 pixels before it stops.

There are various ways to expand on this technique.

1. You can change how fast the layer slides by adjusting the speed in the setTimeout(). A larger number will delay the loop more.

2. You can change the movement incrementation from 5 pixels to something else - larger numbers will make it move faster.

3. Instead of using document.layers["layername"].left we could again use the moveBy(x,y) method slide on a diagonal.

• 2.1 Sliding Layers
  • Sliding Multiple Layers
  • All Directions

1.1 Introduction 1.2 Overlapping 1.3 Nesting 1.4 Using JavaScript	2.1 Sliding Layers 2.2 Pre-Built Functions 2.3 Clipping Layers 2.4 Looping Animations 2.5 Changing Images	3.1 Mouse-Click Animation 3.2 Capturing Keystrokes 3.3 Drag and Drop 4.1 Making Demos 4.4 Problems 4.5 Screen Sizes
Copyright © 1997 Dan Steinman. All rights reserved.