Web Face for Netscape Communicator - Features: Transitions

W	e	b	F	a	c	e
	E	f	f	e	c	t	s

Transitions

Transitions are created by manipulating the properties of layers to either move the layer or change the amount of the layer that is viewable (clipping). More advanced transitions (not discussed here) can also be done by moving layers on top of or under each other. See the Taboca ArtworK layer demo site to see a dissolve effect.

Wipe

Wipe effects are created by changing the clipping of a layer. Wipe close effects are performed by decreasing one edge of the clipping area until it meets the other edge. Wipe open effects are the reverse, the clipping area starts with two edges touching and is increased until the full clipping area is reached. Additional wipe effects can be produced by moving two clipping edges at the same time (ie: both edges start in the middle and move outward).

Source Code
   <SCRIPT LANGUAGE="JavaScript"> // Wipe Close // function trans_wipeclose(layer, speed, direction) { var left = layer.clip.left; var right = layer.clip.right; var top = layer.clip.top; var bottom = layer.clip.bottom; var width = right - left; var height = bottom - top; // Wipe Left Effect if (direction == 'left') { for (i=0; i<width; i=i+speed) layer.clip.right = right - i; layer.visibility = 'hide'; layer.clip.right = right; } // Wipe Right Effect if (direction == 'right') { for (i=0; i<width; i=i+speed) layer.clip.left = left + i; layer.visibility = 'hide'; layer.clip.left = left; } // Wipe Up Effect if (direction == 'up') { for (i=0; i<height; i=i+speed) layer.clip.bottom = bottom - i; layer.visibility = 'hide'; layer.clip.bottom = bottom; } // Wipe Down Effect if (direction == 'down') { for (i=0; i<height; i=i+speed) layer.clip.top = top + i; layer.visibility = 'hide'; layer.clip.top = top; } } </SCRIPT>    <BODY BGCOLOR="#000000" onLoad="trans_wipeclose(document.layers['main'], 5, 'down');"> <LAYER NAME="main" LEFT=0 TOP=0 CLIP="0, 0, 420, 420" BGCOLOR="#990000"> <TABLE WIDTH=100% HEIGHT=100%><TR><TD VALIGN=center ALIGN=center> <FONT SIZE=+4 COLOR="#FFFFFF">Wipe Close Demo</FONT><P> <FONT SIZE=+2 COLOR="#FFFFFF">Press Control-R (Windows) or Command-R (Mac) to see again</FONT> </TD></TR></TABLE> </LAYER>

Pull

Simple pull effects are created by moving the layer using JavaScript while more advanced pulls, such as show below, are created by moving the layer while at the same time manipulating the clipping. This allows pulls to be used for layers which are not touching the edge of the web page, allowing the pull to make it appear that the layer comes out of nowhere.

Source Code
   <SCRIPT LANGUAGE="JavaScript"> // Pull Open // function trans_pullopen(layer, speed, direction) { var clip_left = layer.clip.left; // Original clipping values var clip_right = layer.clip.right; var clip_top = layer.clip.top; var clip_bottom = layer.clip.bottom; var left = layer.left; // Original left position of layer var top = layer.top; // Original top position of layer var moveleft = clip_right; // Amount to move layer left/right var moveup = clip_bottom; // Amount to move layer up/down // Pull left effect if (direction == 'left') { // Position layer to move in layer.left = left + moveleft; // Set clipping so layer is hidden layer.clip.right = clip_left; // Turn visibility of layer on layer.visibility = 'show'; for (i=0; i<moveleft; i=i+speed) { // Move layer to the left layer.left = layer.left - speed; // Adjust right clipping so more // of the layer can be seen layer.clip.right = layer.clip.right + speed; } // Set original layer values to finish layer.left = left; layer.clip.right = clip_right; } // Pull right effect // (see Pull left effect for comments) if (direction == 'right') { layer.left = left - moveleft; layer.clip.left = clip_right; layer.visibility = 'show'; for (i=0; i<moveleft; i=i+speed) { layer.left = layer.left + speed; layer.clip.left = layer.clip.left - speed; } layer.left = left; layer.clip.left = clip_left; } // Pull up effect // (see Pull left effect for comments) if (direction == 'up') { layer.top = top + moveup; layer.clip.bottom = clip_top; layer.visibility = 'show'; for (i=0; i<moveup; i=i+speed) { layer.top = layer.top - speed; layer.clip.bottom = layer.clip.bottom + speed; } layer.top = top; layer.clip.bottom = clip_bottom; } // Pull down effect // (see Pull left effect for comments) if (direction == 'down') { layer.top = top - moveup; layer.clip.top = clip_bottom; layer.visibility = 'show'; for (i=0; i<moveup; i=i+speed) { layer.top = layer.top + speed; layer.clip.top = layer.clip.top - speed; } layer.top = top; layer.clip.top = clip_top; } } </SCRIPT>    <BODY BGCOLOR="#000000" onLoad="trans_pullopen(document.layers['main'], 5, 'down');"> <LAYER NAME="main" LEFT=0 TOP=0 BGCOLOR="#990000" CLIP="0, 0, 420, 420" VISIBILITY=hide> <TABLE WIDTH=100% HEIGHT=100%><TR><TD VALIGN=center ALIGN=center> <FONT SIZE=+4 COLOR="#FFFFFF">Pull Open Demo</FONT><P> <FONT SIZE=+2 COLOR="#FFFFFF">Press Control-R (Windows) or Command-R (Mac) to see again</FONT> </TD></TR></TABLE> </LAYER>

Box-Out

Box-out (and box-in) effects are created by changing the clipping on all four edges of a layer at the same time. The clipping area is set to zero with the edges meeting each other in the center of layer. Each clipping edge is then moved outward until it reaches the full clipping for the layer. The box-out effect is related to the wipe effect in that they both rely on moving one of more of the clipping edges to create their effects.

Source Code
   <SCRIPT LANGUAGE="JavaScript"> // Box-Out // function trans_boxout(layer, speed) { var left = layer.clip.left; // Original clippings var right = layer.clip.right; var top = layer.clip.top; var bottom = layer.clip.bottom; // Set clipping edges to the center of the // layer layer.clip.left = (right - left) / 2 + left; layer.clip.right = (right - left) / 2 + left; layer.clip.top = (bottom - top) / 2 + top; layer.clip.bottom = (bottom - top) / 2 + top; // Show the layer layer.visibility = 'show'; // Endloop determines how many edges have reached their // original value. Once endloop reaches 4, the effect is done. var endloop = 0; while (endloop < 4) { endloop = 0; // If we haven't yet reached the original left // clipping, move the left clipping edge left more. if (layer.clip.left > left) layer.clip.left = layer.clip.left - speed; else endloop++; // If we haven't yet reached the original right // clipping, move the right clipping edge right more. if (layer.clip.right < right) layer.clip.right = layer.clip.right + speed; else endloop++; // If we haven't yet reached the original top // clipping, move the top clipping edge up more. if (layer.clip.top > top) layer.clip.top = layer.clip.top - speed; else endloop++; // If we haven't yet reached the original bottom // clipping, move the bottom clipping edge down more. if (layer.clip.bottom < bottom) layer.clip.bottom = layer.clip.bottom + speed; else endloop++; } // Reset clipping edges to original clippings layer.clip.left = left; layer.clip.right = right; layer.clip.top = top; layer.clip.bottom = bottom; } </SCRIPT>    <BODY BGCOLOR="#000000" onLoad="trans_boxout(document.layers['main'], 5);"> <LAYER NAME="main" LEFT=0 TOP=0 CLIP="0, 0, 420, 420" BGCOLOR="#990000" VISIBILITY=hide> <TABLE WIDTH=100% HEIGHT=100%><TR><TD VALIGN=center ALIGN=center> <FONT SIZE=+4 COLOR="#FFFFFF">Box-Out Demo</FONT><P> <FONT SIZE=+2 COLOR="#FFFFFF">Press Control-R (Windows) or Command-R (Mac) to see again</FONT> </TD></TR></TABLE> </LAYER>