DHTML Lab: Cross-Browser Visibility Transitions; Transitions 4 - 7 (Wipes) | WebReference

DHTML Lab: Cross-Browser Visibility Transitions; Transitions 4 - 7 (Wipes)


Logo

Cross-Browser Visibility Transitions
transitions 4-7: wipes


Element
Visibility
Transitions
 hidden-to-visible
IE4 behavior:
  as described
NS4 behavior:
Boldsame as IE4
BItalicsimilar to IE4
Italicother trans substituted
Box in 0
Box out 1
Circle in 2
Circle out 3
Wipe up 4
Wipe down 5
Wipe right 6
Wipe left 7
Vertical blinds 8
Horizontal blinds 9
Checkerboard across10
Checkerboard down11
Random dissolve12
Split vertical in13
Split vertical out14
Split horizontal in15
Split horizontal out16
Strips left down17
Strips left up18
Strips right down19
Strips right up20
Random bars horizontal21
Random bars vertical22
Random23

The simplest of all our transitions are the four "wipe" transitions. They involve the clipping of one side only for a visible-to-hidden effect.

For vertical wipes (transitions 4 and 5) we determine the clip increment by simply dividing the complete original height (fullH) by the number of function visits (visits):

case 4:
    increment = fullH/visits;
    whichEl.transFunct = four;
    break;
case 5:
    increment = fullH/visits;
    whichEl.transFunct = five;
    break;

For horizontal wipes we divide the full width by visits:

case 6:
    increment = fullW/visits;
    whichEl.transFunct = six;
    break;
case 7:
    increment = fullW/visits;
    whichEl.transFunct = seven;
    break;

four()

For the wipe-up transition, we clip the bottom side of the element by the increment on every function visit. When the height has been completely clipped away, the function calls are cancelled and hideIt() is called to hide the element and restore it to its original size.

function four(){
    this.clip.bottom -= increment;
    if (this.clip.height <= 0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

five()

The wipe-down transition is identical to wipe-up, only we clip the top side:

function five(){
    this.clip.top += increment;
    if (this.clip.height <= 0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

six()

To perform a wipe-right, we clip the left side of the element:

function six(){
    this.clip.left += increment;
    if (this.clip.width <= 0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

seven()

Finally, the wipe-left transition involves clipping the right side.

function seven(){
    this.clip.right -= increment;
    if (this.clip.width <= 0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Apr. 28, 1998
Revised: Apr. 28, 1998

URL: http://www.webreference.com/dhtml/column19/transWipes.html