 | |
| 2.3 | Clipping Multiple Edges |
| |
| 2.3 | Clipping Multiple Edges |
This example is a little involved. Let's begin by examining this layer:
<LAYER VISIBILITY=SHOW NAME="layer1" LEFT=200 TOP=60 BGCOLOR=#FF0000 WIDTH=250 CLIP="125,0,125,110">
<BR><BR><CENTER><FONT SIZE="6" COLOR="#FFFFFF">Layers are fun</FONT></CENTER>
</LAYER>
I set the width to be 250 pixels. By setting left both the clipped left and right co-ordinates to the same value (125), we are starting at the exact center of the layer. Even though the layer still has an overall width of 250, we have clipped it so that nothing is visible (its clipped width is 0). So when you start the example you won't see anything because the layer is initially invisible.
What I will try to accomplish is to first clip the layer's width, and then clip the layer's height. I have to make a separate function for each part.
function clipwidth() {
if (document.layers["layer1"].clip.right < 350) {
document.layers["layer1"].clip.left -= 15;
document.layers["layer1"].clip.right += 15;
setTimeout("clipwidth()",50);
}
else
setTimeout("clipheight()",100);
}
The clipwidth() function works very similar to the first clipping example. Except this time we have two clipping commands (in red). They add 15 pixels to both the left and right edges of the layer. For the "if" statement, we have to choose either the left or right edge to be the "control" edge. It will determine when to stop the layer. In this case I will use the right edge as the control edge. When the right edge has reached 350 pixels, the clipping will stop. I do not have to be worried about the left edge, because I know that it will have moved the same distance as the right edge.
I should maybe re-state how the clip values work. Everything you do with clipping is relative to that particular layer. In this example I set the original left position to 200, and the top position to 60. So any clipping values are relative to (200, 60). If I say to clip the right edge to 100 pixels like:
document.["layer1"].clip.right = 100;
...this actually means that the right edge will be 100 pixels from the original left position of the layer - so the right edge will end up being 300 pixels across on the screen.
Now say we wanted to clip the "left edge" 100 pixels to the left. We'd have to use a command like this:
document.["layer1"].clip.left = -100;
...this is because we do is everything relative to the layer's left position. If the original left position is 200, the final clipped left edge will be at 100 pixels on the screen.
In my "clipwidth()" function I have an "else" statement that calls the function to clip the height:
function clipheight() {
if (document.layers["layer1"].clip.bottom > 55) {
document.layers["layer1"].clip.top += 5;
document.layers["layer1"].clip.bottom -= 5;
setTimeout("clipheight()",50);
}
}
This one works in the opposite manner that "clipwidth()" did. We start with the clipped height to be 110 (defined in the LAYER tag). I move the top edge down 5 pixels and the bottom edge up 5 pixels each time until the bottom edge has reached 55. At the same time the top edge will also be at 55 pixels because I'm moving them at the same time. This will cause the layer to disappear again because the clipped height will be 0.
| ||
| 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 |
| ||