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.

objectName.wipeBy(endt,endr,endb,endl,num,speed,fn)

Where:
• endt - final clip top value
• endr - final clip right value
• endb - final clip bottom value
• endl - final clip left value
• num - the total number of steps in the wipe sequence
• speed - speed of repetition in milliseconds
• fn - (optional) function or statement to execute when the wipe is complete

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

Examples:

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:

mylayer.wipeTo(0,100,100,0,10,30)

To wipe only the right edge to 100:

mylayer.wipeTo(null,100,null,null,10,30)

The wipeBy() Method:

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

objectName.wipeBy(distt,distr,distb,distl,num,speed,fn)

Where:
• distt - clip top increment
• distr - clip right increment
• distb - clip bottom increment
• distl - clip left increment
• num - the total number of steps in the wipe sequence
• speed - speed of repetition in milliseconds
• fn - (optional) function or statement to execute when the wipe is complete

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

Examples:

Wipe all edges "outward" by 20 pixels:

mylayer.clipBy(-20,20,20,-20,5,30)

Wipe all edges "inward" by 20 pixels:

mylayer.clipBy(20,-20,-20,20,5,30)

Wipe the right edge outward by 100 pixels:

mylayer.clipBy(0,100,0,0,5,30)

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:

Edge	Positive Increment	Negative Increment
left	subtracts from the edge	adds more to the edge
right	adds more to the edge	subtracts from the edge
top	subtracts from the edge	adds more to the edge
bottom	adds more to the edge	subtracts from the edge

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

Source Code

dynlayer-wipe.js

DynLayer Extensions:

• How To Extend The DynLayer
• load(), setbg(), img()
• Wipe Methods
• Glide Methods

Home	Next Lesson: Glide Methods

copyright 1998 Dan Steinman