Internet Explorer page transitions

by Jan Verhoeven, 11 August 2002

Using Internet Explorer 5.5+ you can apply a whole range of page transition effects. This is especially usefull when you are using IE for slide shows.

Atlhough the Microsoft site provides all details, the information is split over many pages. This article brings all this information together in a single page.

Enable page transitions

When you want to see page transitions you must  have enabled them with:
Tools - Options - Advanced - Browsing - Enable page transitions

Applying a transition

You apply a transition by added a special META tag to the heading of your page:

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">

For a page exit transition you use:

<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">

Blinds

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)">

Properties: bands (default=10), Direction (default="down"), Duration ( no default)

Barn

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)">

Properties: duration, motion, orientation (default="vertical")

CheckerBoard

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)">

Properties: Direction (default="right"), squaresX (default=12), squaresY (default=10)

Fade

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">

Properties: duration, overlap (default=1.0)

GradientWipe

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)">

Properties: duration, gradientSize (default=0.25), motion

Inset

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)">
 <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)">

Properties: duration

Iris

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)">
 <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)">

Properties: duration, irisStyle (default="PLUS"), motion

Pixelate

 <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)">
 <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)">

Properties: duration, maxSquare (default=25)

RadialWipe

 <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)">
 <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)">

Properties: duration, wipeStyle (default="CLOCK")

RandomBars

 <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)">
 <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)">

Properties: duration, orientation (default="horizontal")

RandomDissolve

 <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">
 <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">

Properties: duration

Slide

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)">

Properties: bands (default=1), duration, slideStyle (default="SLIDE")

Spiral

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)">

Properties: duration, gridSizeX (default=16), gridSizeY (default=16)

Stretch

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)">

Properties: duration, stretchStyle (default="SPIN")

Strips

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)">

Properties: duration, motion

Wheel

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)">

Properties: duration, spokes (default=4)

ZigZag

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)">

Properties: duration, gridSizeX, gridSizeY

Property descriptions

bands (integer)
Sets or retrieves the number of strips into which the content is divided during the transition.

Direction (string)
Sets or retrieves the direction of motion in the transition.

Direction:  "up" | "down" | "right" | "left" 

Duration (floating point)
Sets or retrieves the length of time the transition takes to complete. The value is specified in seconds.milliseconds format (0.0000).

gradientSize
Sets or retrieves the percentage of the object that is covered by the gradient band.

Floating-point that specifies or receives a value that can range from 0.0 to 1.0.0.0 the gradient band has no width as new content is revealed.
0.0 the gradient band has no width as new content is revealed.
0.25 Default. 25% of the object is covered by a gradient band.
1.0 100% of the object is covered by a gradient band.

gridSizeX
Sets or retrieves the number of grid columns used for the filter. The value can range from 1 to 100.

Integer that specifies or receives the number of grid columns. 16 Default. 

gridSizeY
Sets or retrieves the number of grid rows used for the filter. The value can range from 1 to 100.

Integer that specifies or receives the number of grid rows. 16 Default. 

irisStyle
Sets or retrieves the shape of the Iris filter aperture.

String that specifies or receives one of the following values: DIAMOND Diamond-shaped aperture.
CIRCLE Circular aperture.
CROSS X-shaped aperture.
PLUS Default. Plus sign-shaped aperture.
SQUARE Square aperture.
STAR Star-shaped aperture.

maxSquare
Sets or retrieves the maximum width in pixels of a pixelated square.

Integer that specifies or receives a width that can range from 2 to 50 pixels.50 Default. 

motion
Sets or retrieves the value that indicates whether new content is revealed from the outside or the inside first.

"out" Default. The transition moves from the center of the object toward the borders of the object.
"in" The transition moves from the borders of the object toward the center.

orientation
Sets or retrieves the value that indicates whether the filter effect is horizontal or vertical.

"horizontal" Transition lines are horizontal.
"vertical" Transition lines are vertical.

overlap
Sets or retrieves the fraction of the transition's duration that both original and new content are displayed.

Floating-point that specifies or receives a value that can range from 0.0 to 1.0.
1.0 Default. 

slideStyle
Sets or retrieves the method used to reveal the new content.

String that specifies or receives one of the following values:
HIDE Default. Slides bands of original content out, exposing new content.
PUSH Slides bands of new content in, pushing original content out.
SWAP Alternating bands expose new content, or push original content out, at the same time.

spokes
Sets or retrieves the number of wedges that the content is divided into during the transition.

Integer that specifies or receives one of the following possible values:
2 - 20 Number of moving spokes that divide the content into wedges.
4 Default.

squaresX
Sets or retrieves the number of columns for the CheckerBoard transition.

Integer that specifies or receives any positive value greater than or equal to 2. 12 Default. 

squaresY
Sets or retrieves the number of rows for the CheckerBoard transition.

Integer that specifies or receives any positive value greater than or equal to 2. 10 Default. 

stretchStyle
Sets or retrieves the method used to reveal the new content.

String that specifies or receives one of the following possible values:
HIDE Stretches new content over original content from left to right.
PUSH Stretches new content in and squeezes original content out, moving from left to right. This motion resembles a cube rotating from one face to another.
SPIN Default. Stretches new content over original content from the center outward.

wipeStyle
Sets or retrieves the method used to reveal the new content.

String that specifies or receives one of the following possible values. CLOCK Default. Sweeps around the center, clockwise from the top.
WEDGE Sweeps around the center in both directions from the top.
RADIAL Sweeps from the top to the left side, with one end of the sweep anchored on the upper left corner.