Wipe Methods

The wipe methods are animated versions of the clip methods (as slide is to the move methods).

When you want to use these functions all you have to do is include the dynlayer-wipe.js file after the dynlayer file:

<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer-wipe.js"></SCRIPT>

A change in IE 5.0 causes clipping to be a bit of pain. What I recommend is before you do any wipes, reclip your layer using the clipTo() function - just use your initial CSS clip values.

objectName.clipTo(t,r,b,l)  // use your CSS values
// then do your wipe

The wipeTo() Method:

The wipeTo() method will wipe (clip incrementally) the DynLayer's edges from their current value to specific new value. It can do this for any single edge, or multiple edges at the same time.


For any of the edges which you do not wish to be clipped, pass null for it's value.


To wipe the DynLayer's top edge to 0, right to 100, bottom to 100, and left to 0 (making a square box 100x100), in 10 steps, at 30 milliseconds per step:


To wipe only the right edge to 100:


The wipeBy() Method:

Again the wipeBy() is the same as the wipeTo() except the edges are shifted a given number of pixels:


For any of the edges that you do not wish to be clipped pass 0 for it's value.


Wipe all edges "outward" by 20 pixels:


Wipe all edges "inward" by 20 pixels:


Wipe the right edge outward by 100 pixels:


When working with the wipe methods you have to keep your orientation correct. Remember how positive and negative values will effect each of the edges:

EdgePositive IncrementNegative Increment
leftsubtracts from the edgeadds more to the edge
rightadds more to the edgesubtracts from the edge
topsubtracts from the edgeadds more to the edge
bottomadds more to the edgesubtracts from the edge

Example: wipe1.html [source] - variations of the wipe methods

Source Code


DynLayer Extensions:

Home Next Lesson: Glide Methods
copyright 1998 Dan Steinman