In this tutorial I'll show you how to create an image slideshow with an interesting fade-in effect for IE users (IE5.5+ to be exact). It relies on IE's multimedia filters, a quick and easy way to add interesting visual effects to content on your page. Here's what we'll see how to do:
You need IE5.5+ to see the transitional effect, though the slideshow itself works in all browsers. Lets begin shall we?
The Fade filter
Multimedia filters are a IE exclusive feature that instantly adds transitional effects to objects on your page that simply aren't possible using scripting alone. Here we are specifically interested in one of the filters called "Fade." Now, you may be familiar with a filter called "BlendTrans", which was first introduced in IE4; that one is now deprecated in favour of "Fade" (IE5.5+) instead, which is more efficient and contains subtle rendering differences. Like any filter "Fade" is defined using CSS syntax, either inline or within an external CSS:
Inline Definition:
External CSS Definition:
Both of the above are identical. It's probably a good time now to mention that Microsoft states that a filter can only be applied to objects on the page with a layout; in other words, objects with a defined width and height. This is important to know when you're applying filters to textual containers such as a P or DIV. In these cases, you'll need to also define (using CSS) a width for the element, and in many cases, a height as well, before the filter will work.
Defining a filter on an object by itself produces no visible effect- the image above when viewed in your browser remains unchanged. Filters remain dormant until they are invoked and manipulated using scripting, and that's what we'll learn next!
0 komentar:
Post a Comment