Defines special effects transition; e.g.
The syntax for interpage transitions consists of two parts: when the
transition should play, and what kind of interpage transition to use.
The following two examples show how to apply interpage transitions upon
loading and exiting a page.
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
Page Transition Effect - IE
On browsers that do not support the meta
tags, the meta tags will be ignored (the
... Radial Wipe, progid:DXImageTransform.Microsoft.RadialWipe(duration=3)
...
www.permadi.com/tutorial/iePageTransition/
- 14k - |
An
example:
(You can save the text below as a html page and try opening it from
another page to see the transition):
<html>
<head>
<meta http-equiv="Page-Enter"
content="revealTrans(Duration=1.0,Transition=2)">
<meta http-equiv="Page-Exit"
content="progid:DXImageTransform.Microsoft.Pixelate(duration=3)">
<title>Sample</title>
</head>
<body>Sample</body>
</html>
|
Additional
DirectX Transitions
Note: Some of these filters will only work on IE 5.5 or later.
These transitions are not very commonly used, probably because not many
know about them - which means they might be dropped in the future by
Microsoft? Hope not. The Pixelate and Gradient Wipe are
cool.
| Pixelate |
progid:DXImageTransform.Microsoft.Pixelate(duration=3) |
| GradientWipe |
progid:DXImageTransform.Microsoft.gradientWipe(duration=1) |
| Spiral |
progid:DXImageTransform.Microsoft.Spiral(duration=3,
GridSizeX=205, GridSizeY=205) |
| Wheel |
progid:DXImageTransform.Microsoft.Wheel(duration=3,
spokes=10) |
| Radial Wipe |
progid:DXImageTransform.Microsoft.RadialWipe(duration=3) |
| Iris |
progid:DXImageTransform.Microsoft.Iris(duration=3) |