Creating a flashy image slideshow with IE Transitions

Last updated: Dec 1st, 08

Multimedia Transitions are an IE exclusive feature that lets you instantly add transitional effects to elements on your page when the state of the element's content changes. Yes it only works in IE, but when used cleverly it's an asset that can be quickly applied to IE users while not holding back the rest of the bunch. In this tutorial I'll show you how to create a fully cross browser image slideshow that's enhanced visually in IE thanks to Transitions.

The following slideshows works in all browsers, though IE users see a random transition applied:

Defining transitions

When it comes to built in IE transitions, there's a nice assortment to choose from. They are:

Filter Description/ Sample Definition
Barn Reveals content using the effect of opening/ closing doors.
Blinds Reveals content by opening and closing "blinds".
CheckerBoard Reveals new content by uncovering squares placed like a checkerboard over the original content.
Fade Applies a fade effect to transition from one content to another.
GradientWipe Reveals new content by applying a gradient band over the original content.
Inset Shows new content using a diagonal reveal effect.
Iris Reveals new content using an Iris effect (similar to a camera shutter opening).
Pixelate Reveals new content by applying a pixelating effect.
RadialWipe Reveals new content using a "windshield wiper" effect.
RandomBars Reveals new content by exposing random lines of pixels.
RandomDissolve Reveals new content by exposing random pixels of the content.
Slide Reveals new content by sliding in the new content over the old.
Spiral Reveals new content using a spiral animation.
Stretch Reveals new content using stretching the new content into view.
Strips Reveals new content by moving successive strips into place,.
Wheel Reveals new content using a clockwise wheel effect.
Zigzag Reveals new content by revealing it line by line, from top to bottom, left to right, in a zigzag motion.

A transition can be defined on an element in two ways- via CSS (ie: global CSS), or dynamically, using scripting. Lets use the "Fade" transition as an example:

Global CSS:

<style type="text/css">

-ms-filter: "progid:DXImageTransform.Microsoft.Fade(duration=3)"; /*IE8+ syntax*/
filter :progid:DXImageTransform.Microsoft.Fade(duration=3); /*Pre IE8 syntax*/


Or dynamically in JavaScript:

<script type="text/javascript">
var myimage=document.getElementById('myimage')"progid:DXImageTransform.Microsoft.Fade(duration=3)" //Fade transition

Both of the above achieve the same thing, though note in the global CSS setup how the "Fade" filter needs to be defined twice so it actually reaches all versions of IE. Checking for support for transitions at this point isn't necessary even in the JavaScript case, as we're just setting a property of the "style" object here, with browsers that don't recognize the "filter" property treating it as an expando property (one that's user defined) on "style".

Now, here I'm showing just the set up for the "Fade" filter- what about the rest of the bunch? Well, what's the saying "teach a man to fish, and...". Blah, anyway, the idea is the same for every IE transition, with the one caveat being that different transitions support different attributes (ie: duration is a common shared one) which need to be taken into account when defining that transition. Looking up the syntax for the "Pixelate" transition, here's a sample definition using JavaScript:

<script type="text/javascript">
var myimage=document.getElementById('myimage')"progid:DXImageTransform.Microsoft.Pixelate(duration=3, maxSquare=10)" //pixelate transition

Elements with a transition defined on them needs to have a "layout" in order for the transition to take effect. "Layout" is defined as having either an explicit width or height to the element. For example, a DIV with a transition defined should have its width explicitly set in CSS. The exception are images, which already have explicit dimensions built into them. See IE Filters checklist for complete details.

Note: Starting in IE8, elements no longer need a layout for a transition to work on them.

Defining a transition on an element doesn't do much on its own, actually. The effect is now set up and ready to be played, but in order to actually see it, you need to, well, play it. That's what the next section looks at- Playing transitions using JavaScript.