http://www.jegsworks.com/demos/DemoDHTML/transition-reveal.htm

Reveal Transition


The Reveal transition comes in 23 flavors using 22 different patterns of revealing the new content. The Random reveal choses one of the other patterns at random.

Click on the Number or Description below to see the effect on the images and text at right.
(To keep the table from jumping during transitions, it has been put in a DIV with absolute position. A transition must finish before another will start)


Crater Lake
Here is Text
Number Description Number Description Number Description
0 Box In 8 Vertical Blinds 16 Split Horizontal Out
1 Box Out 9 Horizontal Blinds 17 Strips Left Down
2 Circle In 10 Checkerboard Across 18 Strips Left Up
3 Circle Out 11 Checkerboard Down 19 Strips Right Down
4 Wipe Up 12 Random Dissolve 20Strips Right Up
5 Wipe Down13Split Vertical In21Random Bars Horizontal
6Wipe Left14Split Vertical Out22Random Bars Vertical
7Wipe Right15Split Horizontal In23Random

Syntax & Settings

The examples above use a rather complex script to avoid scripting each number and description separately. Here is a simpler one-transition example so you can see the syntax more easily.

Click the image to run a Box In transition. Use the Refresh command to reset it to run again. (This keeps the code simple!)

Crater Lake


In the example, to get the Box In transition to work on the Crater Lake picture you must follow all three steps:

1. Set the reveal transition in STYLE with:
{filter:revealTrans(duration=3, transition=0);}
   Nothing will happen to start with!!
2. Call a function from onClick event of image with:
onClick="changelake()"
3. In SCRIPT apply() the transition, make changes in source and/or other features, and play() the transition

<SCRIPT>
function changelake()
{lake.filters.revealTrans.apply();
lake.src="../gfx/TestFoto.gif";
lake.filters.revealTrans.play();
}
<SCRIPT>

The general format for the Reveal transition with its Apply and Play methods is:
{FILTER:revealTrans(duration=duration, transiton=transitiontype);}

object.filters.revealTrans.apply();

**All changes coded here**

object.filters.revealTrans.play();

Duration is written as whole seconds or as seconds.milliseconds, as in 5.500 for five and a half seconds.
Transition is the number from the chart above for the type of transition you want, ranging from 0 to 23.
Object is the ID of the visual object you are using the transition on.

The purpose of the Apply() method is to stop rendering of the object while you make the changes you want, like to the source, dimensions, or color.


© 1997-2002 Jan Smith   <jegs1@jegsworks.com>