Filters And Transitions In IE5 - Zig And Zag (
Page 9 of 9 )
Internet
Explorer 5.5 also comes with some new effects - Zigzag, Iris, Barn, Blinds,
Wheel, Slide, Checkerboard et al. Here's an example of how you could implement
one of these new effects.
<html>
<head>
<script language="JavaScript">
// function to perform transition
function playTransition()
{
// apply transition
document.all.object.filters[0].Apply();
// change image source
document.all.object.src="face.gif";
// play transition
document.all.object.filters[0].Play();
}
</script>
</head>
<body onLoad="playTransition()">
<img id=object style="filter:
progid:DXImageTransform.Microsoft.Wheel(duration=3)" src="square.gif">
</body>
</html>
To try out one of the other filters, simple replace the transition
name above ("Wheel") with the name of the transition you'd like to try out
("Blinds" or "Slide"). Note that some of the new filters require additional
attributes that control the direction or style in which the effect is
applied.
In case you'd prefer to apply the transition to the entire page,
you need to add appropriate code to the <META> tag within the <HEAD>
of your HTML page. This code consists of the event to which the transition
should be linked, the type of transition, and the duration, in seconds, of the
transition.
Internet Explorer currently supports four types of events:
Page-Enter, Page-Exit, Site-Enter and Site-Exit. Here's an example which
demonstrates vertical blinds when entering a page:
<html>
<head>
<meta http-equiv="Page-Enter" content="revealTrans(duration=10,
transition=8)">
</head>
<body>
<center>
<h2>Welcome to my Web page</h2>
</center>
</body>
</html>
In this case, the effect will take place over a period of ten
seconds, the duration again being capable of manipulation in the filter
definition.
And that's just about it. See you soon!
This article copyright Melonfire 2000. All rights reserved.
