How to Create a Basic HTML+TIME Transition
| Internet Development Index |
This tutorial shows you how to use HTML+TIME (Timed Interactive Multimedia Extensions) transitions to allow an element to transition into view and then transition the element out of view. This is an example of using HTML+TIME transitions at a very basic level. Click the following Show Me button to see the sample you can create.
- Prerequisites
- A Quick Look At the Code
- Setting the Stage
- Transition into View
- Transition out of View
- Related Topics
Prerequisites
This article assumes you know how to use Introduction to DHTML Behaviors, specifically, the time2 behavior of HTML+TIME. This article does not go into great detail on how to add a behavior to your page nor does it cover how to declare a namespace and use custom tags, as required by the time2 behavior. These topics are covered in the HTML+TIME Overview and Spice Up Your Web Pages with HTML+TIME.A Quick Look At the Code
To start, have a quick look at the code of the entire sample. Later on, this code is explained in greater detail, but for now, it might be useful to have a preview of what is needed to make the sample.
<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
#oDiv
{
border:2px solid black;
font:18pt arial;
padding:20;
color:#000000;
background-color:#FFCC00;
width:270px;
height:270px;
}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<DIV ID="oDiv" BEGIN="1" CLASS="time" DUR="8">
<t:TRANSITIONFILTER BEGIN="oDiv.begin" DUR="3" TYPE="fade"/>
<t:TRANSITIONFILTER BEGIN="oDiv.end - 3" DUR="3" MODE="out" TYPE="pushWipe"/>
This DIV Transitions In, Stays For Two Seconds, And<br> Then Transitions Out.
</DIV>
</BODY>
</HTML>
As you can see, the code is relatively short. Besides the DIV element, there are only two t:TRANSITIONFILTER elements inside of the body of the document. It is these t:TRANSITIONFILTER elements and the attributes inside of them that control the timing and characteristics of the transition that is applied to the DIV element. This tutorial walks through each of the following steps to create the sample.
- Write the miscellaneous code needed for the sample to work properly.
- Write the code that is needed to instantiate the HTML+TIME behavior.
- Write the formatting code that will be needed by the menu in a STYLE tag.
- Create the time element that is to be transitioned.
- Create the t:TRANSITIONFILTER element that transitions the time element into view.
- Create the t:TRANSITIONFILTER element that transitions the time element out of view.
Setting the Stage
To use HTML+TIME elements and use the time2 behavior, the following code is needed.
<HTML XMLNS:t = "urn:schemas-microsoft-com:time"> <HEAD> <STYLE> .time {behavior: url(#default#time2);} </STYLE> <?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" /> </HEAD> <BODY> </BODY> </HTML>For more information about creating an XML namespace and referencing the time2 behavior, see Authoring HTML+TIME.
Next, we add the formatting code inside of the STYLE tags. The DIV element in this sample derives its formatting from here. By separating formatting code from rendered elements, the functional code is simplified.
<STYLE> .time {behavior: url(#default#time2);} #oDiv { border:2px solid black; font:18pt arial; padding:20; color:#000000; background-color:#FFCC00; width:270px; height:270px; } </STYLE>You must then create an element that you want to transition. For this sample, we use a DIV.
<DIV id="oDiv" STYLE="width:270" CLASS="time" BEGIN="3" DUR="8"> This DIV Transitions In, Stays For Two Seconds, And Then Transitions Out. </DIV>
Let's take a closer look at this DIV. There are a number of features worth mentioning.
First, the element must have layout in order to have an HTML+TIME transition applied to it. The DIV in this tutorial gains layout by having the width and height specified inside the STYLE tag that you included.<STYLE> #oDiv { . . width:270px; height:270px; . . } </STYLE>For more information about what is needed to gain layout, see What Can Be Transitioned?.
The CLASS attribute is set to time, which applies the time2 behavior to the DIV. This, too, is needed allows the DIV to have the transition applied to it.
The BEGIN attribute had a value of 3. This means that the element appears three seconds after the page loads.
The DUR attribute is set to a value of 8 (eight seconds). Because we want to transition the DIV out of view, it must have a finite duration that it is visible. The period of time that the element is visible is known as the active period of the element.
Let's take a look at the sample so far.
<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
#oDiv
{
border:2px solid black;
font:18pt arial;
padding:20;
color:#000000;
background-color:#FFCC00;
width:270px;
height:270px;
}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<DIV ID="oDiv" BEGIN="1" CLASS="time" DUR="8">
This DIV Transitions In, Stays For Two Seconds, And<br> Then Transitions Out.
</DIV>
</BODY>
</HTML>
As you can see, the DIV appears and disappears, but no transitions take place yet. Next, we see how to transition the DIV into view.
Transition into View
The first t:TRANSITIONFILTER in the example controls the DIV transitioning into view.
<DIV id="oDiv" STYLE="width:270" CLASS="time" BEGIN="3" DUR="8" > <t:TRANSITIONFILTER BEGIN="oDiv.begin" DUR="3" TYPE="fade"/> This DIV Transitions In, Stays For Two Seconds, And Then Transitions Out. </DIV>
The BEGIN attribute is set to oDiv.begin. This specifies that the transition element is to begin at the same time as the DIV on the time line. It is important to realize that t:TRANSITIONFILTER elements have a beginning, duration of activity, and end that correspond to the state of the transition. Because the DIV appears to transition from invisible to visible, the t:TRANSITIONFILTER begins at the same time as the DIV. Of course, the t:TRANSITIONFILTER could be started at any time during the active period of the DIV but the results would probably be undesirable.
The DUR attribute specifies how long the t:TRANSITIONFILTER is active. This specifies how long the transition takes to complete. The transition finishes after three seconds; therefore, the DIV becomes fully visible after three seconds. At this point, three seconds of the DIV's total active duration of eight seconds has already expired.
The TYPE attribute specifies the kind of transition that takes place. In this case, the transition fades into view.
Here is the sample so far.
<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
#oDiv
{
border:2px solid black;
font:18pt arial;
padding:20;
color:#000000;
background-color:#FFCC00;
width:270px;
height:270px;
}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<DIV ID="oDiv" BEGIN="1" CLASS="time" DUR="8">
<t:TRANSITIONFILTER BEGIN="oDiv.begin" DUR="3" TYPE="fade"/>
This DIV Transitions In, Stays For Two Seconds, And<br> Then Transitions Out.
</DIV>
</BODY>
</HTML>
Transition out of View
The second t:TRANSITIONFILTER in the example controls the DIV transitioning out of view.
<DIV id="oDiv" STYLE="width:270" CLASS="time" BEGIN="3" DUR="8" > <t:TRANSITIONFILTER BEGIN="oDiv.begin" DUR="3" TYPE="fade"/> <t:TRANSITIONFILTER BEGIN="oDiv.end - 3" DUR="3" MODE="out" TYPE="pushWipe"/> This DIV Transitions In, Stays For Two Seconds, And Then Transitions Out. </DIV>
The MODE attribute is set to out. This attribute specifies whether the DIV becomes more or less visible as the transition proceeds. The value of out specifies that the DIV becomes less visible. A value of in would specify that it becomes more visible. Because in is the default value, the mode attribute did not need to be included in the first t:TRANSITIONFILTER element.
The BEGIN attribute is set to oDiv.begin - 3. This t:TRANSITIONFILTER element begins three seconds before the DIV ends on the time line. The DUR value of this t:TRANSITIONFILTER is three seconds, so the transition ends at the exact same time as the DIV ends. Like the first transition, it is important to get this timing right. For instance, if the t:TRANSITIONFILTER begins too early, the DIV would transition out for a moment, appear again, and then disappear when the active period of the DIV elapsed. If the t:TRANSITIONFILTER starts too late, the DIV would transition out part of the way and then suddenly disappear because the t:TRANSITIONFILTER cannot extend the duration of the DIV. As expected, if the active periods of the t:TRANSITIONFILTER and the DIV do not overlap at all, no transition occurs on the DIV.
Here is the completed sample.
<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
#oDiv
{
border:2px solid black;
font:18pt arial;
padding:20;
color:#000000;
background-color:#FFCC00;
width:270px;
height:270px;
}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<DIV ID="oDiv" BEGIN="1" CLASS="time" DUR="8">
<t:TRANSITIONFILTER BEGIN="oDiv.begin" DUR="3" TYPE="fade"/>
<t:TRANSITIONFILTER BEGIN="oDiv.begin+5" DUR="3" MODE="out" TYPE="pushWipe"/>
This DIV Transitions In, Stays For Two Seconds, And<br> Then Transitions Out.
</DIV>
</BODY>
</HTML>