The wipe methods are animated versions of the clip methods (as slide is to the move methods).
I include the wipe methods as an add-on JavaScript file, dynlayer-wipe.js. To include this and the dynlayer.js file you'll need to have 2 SCRIPT tags:
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="dynlayer-wipe.js"></SCRIPT>
The wipe methods are initialized with the the central method called wipeInit() (just like how slideInit() works). This method is not built into the DynLayer by default, but you can individually assign the method to any DynLayer that you've created:
objectName = new DynLayer("objectNameDiv")
objectName.wipeInit = DynLayerWipeInit
Since the wipe methods make heavy use of clip methods, I made the wipe method automatically initialize the clip methods (if you initialize wipe, you do not have to initialize the clip). Therefore the wipeInit() function has the same parameters as clipInit().
For a layer clipped to the default values:
objectName.wipeInit()
For a layer clipped arbitrarily:
objectName.wipeInit(clipTop,clipRight,clipBottom,clipLeft)
The wipeInit() method will automatically initialize the 3 clip methods (clipValues(), clipTo(), and clipBy()), as well as 2 internal methods for wiping the layer.
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)
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.clipTo(0,100,100,0,10,30)
To wipe only the right edge to 100:
mylayer.clipTo(null,100,null,null,10,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:
| 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 |
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)
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)
View wipe1.html for an example using different variations of the wipe methods
Download: dynlayer-wipe.js
View Source: dynlayer-wipe.js
| Home | Next Lesson: Geometric Objects |