Impressing with Static Filters
Use filters if you can assume that people not using Internet Explorer won’t suffer from not seeing them. Filters are a Microsoft-only technology, and though you can use them with CSS styles, CSS itself hasn’t yet progressed to embrace animation (unless you consider hyperlinks that change color when clicked a form of animation). However, many filters are merely used to add some nice visual effects and those who browse without IE only miss some beauty (not much information) by not seeing them.
Here’s an example of a static filter. (A static filter doesn’t change over time; we’ll get to dynamic filters, or transition filters, in the section called “Dazzling with Transition Filters.”) Try this code to see a filter that adds drop shadows to text, Blocks.
Dazzling with Transition Filters
I might get a little ahead of myself here, introducing a bit of scripting (programming for Web browsers), but what the heck? However, just for fun, I want to show you how to trigger some interesting transition filters (also known as dynamic filters) using script.
When you write script, you have to decide between the two great families of programming languages: Basic and C. My preference is Basic, but many people (mostly professional programmers) prefer the C-like scripting language JavaScript. For this first example, I’ll provide a script for both languages if you’re interested in comparing them.
Fading between Images
Another really useful, attractive effect is to fade or wipe or otherwise transition between two images. You’ve doubtless seen this technique. It’s used in all browsers because it can be applied via JavaScript. Some of the best-designed Web sites use delicate fades — often triggered when you first view the page as a kind of introduction, with one image gently dissolving into another.
Transitions between Pages
Would you like your entire Web page to fade in (or otherwise transition) when the user first visits your site? You can do whole-page transitions by just adding a little so-called “meta” code to your HTML code.
Now save this file as effects.htm to your hard drive. Double-click on it in Windows Explorer and it loads the page into Internet Explorer. If you see a security warning, click the warning and permit this page to load. Then try pressing F5 to reload the page. Watch the cool “wheel” effect when the pageenter condition (event, as it’s called) happens.
Lastly Comment
If I were you, I’d avoid using the page-exit transitions unless you have a multipage Web site and you want to use them between your own pages. (No matter what, make them of short duration.) Transitions do take a bit of time and some people might be annoyed with you for making them watch your page grudgingly yield to the site they’re trying to visit next. You can also replace the page-enter and page-exit events with site-enter and site-exit events if you wish.
