12.9 Creating Transition Visual Effects

NN n/a, IE 4 (Win)

12.9.1 Problem

You want elements that change their visual characteristics (e.g., hiding, showing, image swapping) to reveal the new state by way of a visual effect such as a wipe, barn door, checkerboard, or dissolve.

12.9.2 Solution

Transitions in IE for Windows are part of the proprietary filter extensions to CSS (not implemented in IE for Macintosh). Two filter syntaxes are available. One is backward-compatible all the way to IE 4; the other requires IE 5.5 or later. I'll demonstrate a solution that applies a dissolve transition between image swaps from Recipe 12.2.

Transitions have two components. The first is a filter definition applied via style sheet rules. The following modification of the <img> tag for Recipe 12.2 adds a one-half second dissolve (fade) transition filter in the backward-compatible syntax:

<img name="products"  height="20" width="50" border="0" src="img/prodNormal.jpg" 
style="filter:blendTrans(duration=0.5)" alt="Products">

Here's the newer syntax, which utilizes a more powerful ActiveX control delivered with IE 5.5 for Windows or later:

<img name="products"  height="20" width="50" border="0" src="img/prodNormal.jpg" 
style="filter:progid:DXImageTransform.Microsoft.Fade(duration=0.5)" 
alt="Products">

The second component of an element transition consists of two scripted methods of the filter object: apply( ) and play( ). The apply( ) method freezes the view of the element whose filter you address. This gives you the opportunity to make the change(s) to the element out of view. Then the play( ) method lets the transition filter execute the transition between the original and modified states. Modifying the image-swapping function of Recipe 12.2 to accommodate the backward-compatible filter syntax causes the function to become:

function setImage(imgName, type) {
    if (document.images) {
        document.images[imgName].filters["blendTrans"].apply( );
        if (type =  = "hilite") {
            document.images[imgName].src = imagesHilite[imgName].src;
        } else if (type =  = "normal") {
            document.images[imgName].src = imagesNormal[imgName].src;
        }
        document.images[imgName].filters["blendTrans"].play( );
        return true;
    }
    return false;
}

If you use the newer ActiveX control for filters, the function becomes:

function setImage(imgName, type) {
   if (document.images) {
      document.images[imgName].filters["DXImageTransform.Microsoft.Fade"].apply( );
      if (type =  = "hilite") {
          document.images[imgName].src = imagesHilite[imgName].src;
      } else if (type =  = "normal") {
          document.images[imgName].src = imagesNormal[imgName].src;
      }
      document.images[imgName].filters["DXImageTransform.Microsoft.Fade"].play( );
      return true;
   }
   return false;
}

The only other difference between the Recipe 12.2 version and the transition-enhanced versions is that the return true statement is moved to execute after the transition plays.

12.9.3 Discussion

The two generations of CSS filters in IE for Windows present very different ways of referencing specific transition effects. Transitions in the backward-compatible form are divided into two families: the blend (dissolve) and reveal (numerous types). Assign a blend via the blendTrans( ) filter, with one parameter for the duration in seconds:

img.blends {filter:blendTrans(duration=0.5)}

A reveal transition (revealTrans( )) definition includes two parameters: transition, which requires an integer value corresponding to the type of shape used in the transition, and duration, which controls the speed:

div.wipe {filter:revealTrans(transition=7, duration=1.5)}

Transition types are listed in Table 12-3.

Table 12-3. IE backward-compatible transition types

Type	Meaning		Type	Meaning
0	Box in		12	Random dissolve
1	Box out		13	Split vertical in
2	Circle in		14	Split vertical out
3	Circle out		15	Split horizontal in
4	Wipe up		16	Split horizontal out
5	Wipe down		17	Strips left down
6	Wipe right		18	Strips left up
7	Wipe left		19	Strips right down
8	Vertical blinds		20	Strips right up
9	Horizontal blinds		21	Random bars horizontal
10	Checkerboard across		22	Random bars vertical
11	Checkerboard down		23	Random

You can modify the properties of a particular filter by script. For example, if you want to change an element's transition filter from a wipe to a circle in style, reference the filter's transition property as follows:

elementReference.filters["revealTrans"].transition = 2;

In the newer filter syntax, each transition type has its own filter, as shown in Table 12-4.

Table 12-4. IE new-style transition filters

Filter name	Description
Barn( )	A barn-door transition effect, with properties for duration, motion, and orientation
Blinds( )	A venetian-blind transition effect, with properties for direction, duration, and thickness (bands) of the slats
Checkerboard( )	A checkerboard transition effect with properties for direction, duration, and square sizes (squaresX, squaresY)
Fade( )	A blended transition between views, with properties for duration and the degree of overlap of both views
GradientWipe( )	A wipe transition using a gradient blend at the wipe line, with properties for duration, thickness of the gradient (gradientSize), and direction (wipeStyle)
Inset( )	A wipe transition that works along horizontal and vertical axes, but diagonally from one corner to its opposite, with duration property
Iris( )	A zoom-style transition with properties for duration, motion (in or out), and irisStyle (e.g., circle, cross, diamond, plus, square, star)
Pixelate( )	Blends between views via an expansion/contraction and blurring/focusing of the content, with properties for duration and maximum pixel size (maxSquare)
RadialWipe( )	Blends between views via your choice of duration and wipeStyle (clock, wedge, radial)
RandomBars( )	Blends between views via expanding/contracting bars, with properties for orientation and duration
RandomDissolve( )	Blends between views through random pixel changes, with duration property
Slide( )	Blends between views through banded sliding of various types, with properties for band thickness (bands), duration, and slideStyle (hide, push, swap)
Spiral( )	Blends between views through spiral reveals, with properties for duration and spiral size (gridSizeX, gridSizeY)
Stretch( )	Blends between views through various stretch-style reveals, with properties for duration and stretchStyle (hide, push, spin)
Strips( )	Blends between views with striped effect, with properties for duration and motion
Wheel( )	Blends between views via wheel spokes emanating from the element center, with properties for duration and spoke size (spokes)
ZigZag( )	Blends between views via removal of rows of bricks, with properties for duration and size (gridSizeX, gridSizeY)

The newer filter mechanism is obviously more powerful than the backward-compatible version, although it is also considerably more verbose because you must reference the ActiveX control in references to the filter:

document.images[imgName].filters["DXImageTransform.Microsoft.Fade"].apply( );

If you want to change the transition type after a page has loaded, you can assign a new filter string to the style.filter property:

elementRef.style.filter = "progid:DXImageTransform.Microsoft.Iris(duration=1.0)";

References to filter styles can get tricky because the reference syntax varies with your intention. To control an existing filter type (to invoke one of its methods or alter one of its properties), use the filters array of the element itself (not the element's style property). The index to the array can be either an integer (corresponding to the source code order of the filters assigned to the element) or a string name of the specific filter. To control the filter type, assign a complete filter specification to the element's style.filter property.

Using the apply( ) and play( ) methods of a filter object works within the same page when you alter some visible characteristic of an element. But if you want to use these transitions for slide shows when the slides are different HTML pages, you must assign the transition filters to <meta> tags of the pages. Proprietary attribute values instruct IE for Windows to apply the defined transition to the page upon entry and exit. Usually you need a transition on either entry or exit, but not both. The exception might be if you also have an intervening blank or black page between slides to emphasize two different effects, such as an iris-in when entering the blank page and an iris-out when leaving the blank. The <meta> tags for the blank page in this scenario look like the following:

<meta http-equiv="Page-Enter"
content="progid:DXImageTransform.Microsoft.Iris(Motion='in', IrisStyle='circle')">
<meta http-equiv="Page-Exit"
content="progid:DXImageTransform.Microsoft.Iris(Motion='out', IrisStyle='circle')">

By placing these transitions in the blank pages, you don't need to specify page transitions in the content slides. Nor is any scripting required for the transitions. But you still use a script to assemble the URL of the next content slide and pass that data as a search string to the blank page (see Recipe 10.6). A script in the blank page parses the location.search data to navigate to the next content slide, causing the exit transition to fire en route.

12.9.4 See Also

Recipe 10.6 for passing data between pages via URLs; Recipe 15.4 for a DHTML slide show; for complete details on IE transition types and their properties, visit http://msdn.microsoft.com/workshop/author/filter/filters.asp.