DHTML Lab: Cross-Browser Visibility Transitions; Transitions 17-20 (Strips) | WebReference

DHTML Lab: Cross-Browser Visibility Transitions; Transitions 17-20 (Strips)


Logo

Cross-Browser Visibility Transitions
transitions 17-20: strips


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

Strips??

The so-called "strip" transitions are in reality "diagonal wipes". We cannot duplicate them, exactly, in Navigator, but we can create similar, substitute versions. Instead of a wipe, we will clip two, adjacent, sides of the element, repeatedly. This will create a box-in effect toward one corner of the element.

The variables are created using the same statements we used for our box-in transition. The difference here is that two sides are clipped instead of four, so we use fullW and fullH to generate the variables.

All four transitions have the same statements. Only the function names are different.

Left Down

case 17:
    incW = fullW/visits;
    incrementW = (incW >= 1) ? parseInt(incW) : 0;
    xtraPixW = Math.round((incW - incrementW) * visits);
    incH = fullH/visits;
    incrementH = (incH >= 1) ? parseInt(incH) : 0;
    xtraPixH = Math.round((incH - incrementH) * visits);
    whichEl.transFunct = seventeen;
    break;

Left Up

case 18:
    incW = fullW/visits;
    incrementW = (incW >= 1) ? parseInt(incW) : 0;
    xtraPixW = Math.round((incW - incrementW) * visits);
    incH = fullH/visits;
    incrementH = (incH >= 1) ? parseInt(incH) : 0;
    xtraPixH = Math.round((incH - incrementH) * visits);
    whichEl.transFunct = eighteen;
    break;

Right Down

case 19:
    incW = fullW/visits;
    incrementW = (incW >= 1) ? parseInt(incW) : 0;
    xtraPixW = Math.round((incW - incrementW) * visits);
    incH = fullH/visits;
    incrementH = (incH >= 1) ? parseInt(incH) : 0;
    xtraPixH = Math.round((incH - incrementH) * visits);
    whichEl.transFunct = nineteen;
    break;

Right Up

case 20:
    incW = fullW/visits;
    incrementW = (incW >= 1) ? parseInt(incW) : 0;
    xtraPixW = Math.round((incW - incrementW) * visits);
    incH = fullH/visits;
    incrementH = (incH >= 1) ? parseInt(incH) : 0;
    xtraPixH = Math.round((incH - incrementH) * visits);
    whichEl.transFunct = twenty;
    break;

seventeen() - twenty()

The functions are variations on our original zero() function, only two sides, relevant to the transition direction, are clipped, instead of four. Review the box-in transition for the function logic.

Left Down

function seventeen(){
    if (xtraPixW > 0) {
        if (xtraPixW <= visits) {
            if (alternateW) {
                this.clip.right--;
                xtraPixW--;
            }
            alternateW = !alternateW;
        }    
        else {
            this.clip.right--;
            xtraPixW--;
        }
    }
    this.clip.right -= incrementW;
    if (xtraPixH > 0) {
        if (xtraPixH <= visits) {
            if (alternateH) {
                this.clip.top++;
                xtraPixH--;
            }
            alternateH = !alternateH;
        }    
        else {
            this.clip.top++;
            xtraPixH--;
        }
    }
    this.clip.top += incrementH;
    visits--;
    if (this.clip.height <= 0 && whichEl.clip.width <= 0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

Left Up

function eighteen(){
    if (xtraPixW > 0) {
        if (xtraPixW <= visits) {
            if (alternateW) {
                this.clip.right--;
                xtraPixW--;
            }
            alternateW = !alternateW;
        }    
        else {
            this.clip.right--;
            xtraPixW--;
        }
    }
    this.clip.right -= incrementW;
    if (xtraPixH > 0) {
        if (xtraPixH <= visits) {
            if (alternateH) {
                this.clip.bottom--;
                xtraPixH--;
            }
            alternateH = !alternateH;
        }    
        else {
            this.clip.bottom--;
            xtraPixH--;
        }
    }
    this.clip.bottom -= incrementH;
    visits--;
    if (this.clip.height <= 0 && whichEl.clip.width<=0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

Right Down

function nineteen(){
    if (xtraPixW > 0) {
        if (xtraPixW <= visits) {
            if (alternateW) {
                this.clip.left++;
                xtraPixW--;
            }
            alternateW = !alternateW;
        }    
        else {
            this.clip.left++;
            xtraPixW--;
        }
    }
    this.clip.left += incrementW;
    if (xtraPixH > 0) {
        if (xtraPixH <= visits) {
            if (alternateH) {
                this.clip.top++;
                xtraPixH--;
            }
            alternateH = !alternateH;
        }    
        else {
            this.clip.top++;
            xtraPixH--;
        }
    }
    this.clip.top += incrementH;
    visits--;
    if (this.clip.height <= 0 && whichEl.clip.width<=0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

Right Up

function twenty(){
    if (xtraPixW > 0) {
        if (xtraPixW <= visits) {
            if (alternateW) {
                this.clip.left++;
                xtraPixW--;
            }
            alternateW = !alternateW;
        }    
        else {
            this.clip.left++;
            xtraPixW--;
        }
    }
    this.clip.left += incrementW;
    if (xtraPixH > 0) {
        if (xtraPixH <= visits) {
            if (alternateH) {
                this.clip.bottom--;
                xtraPixH--;
            }
            alternateH = !alternateH;
        }    
        else {
            this.clip.bottom--;
            xtraPixH--;
        }
    }
    this.clip.bottom -= incrementH;
    visits--;
    if (this.clip.height <= 0 && whichEl.clip.width<=0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

Finally, let's look at the last transition, Random (23).


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/transStrips.html