Internet Explorer Wave Filters - Page 7
August 30, 2002
The Wave Filter is a great effect that will wave either text or
an image, as long as that text or image sits inside of a division
or SPAN.
You can find this tutorial, and all of its examples, online at
http://www.htmlgoodies.com/beyond/wavefilter.html.
You can download just the examples at
http://www.htmlgoodies.com/wpg/.
The Wave Filter acts a lot like a Style Sheet command, as do the
other static text filters. I just broke this one out from the
other text filters because there are so many more settings to play
with.
Examples
Let me give you an example of what this filter can do. Take this code. . . please:
<DIV STYLE="width:350;height:70;filter:wave(strength=4, freq=2,
lightstrength=40, add=0, phase=20)">
<FONT SIZE=+3>Here's What You Get.</FONT>
</DIV>
It gives you the effect shown in Figure 3.17.
Here's What You Get.
Figure 3.17
Ooooo! Wavy gravey.
Now, let's apply the same parameters to an image. The code looks like this:
<DIV STYLE="width:350;height:70;filter:wave(strength=4, freq=2,
lightstrength=40, add=0, phase=120)">
<IMG SRC="/images/eggs.gif">
</DIV>
. . . and it gives you Figure 3.18.
Figure 3.18
Ooooo! Wavy eggey.
Make a point of keeping all the Style Sheet and parameter codes
in the on the same line. If you don't, you might not get
the effect.
Parameters
The real fun of this filter is setting the parameters to differing
levels of intensity. Go nuts! Here's what each one means and how
you can set it-just follow the format in the previous code examples:
- add Do you want the original image added to the mix? Use 0 for no and 1 for yes.
- enabled Is the effect turned on or not? Use 0 for no and 1 for yes.
- freq How many waves do you want?
- lightStrength How much light intensity do you want?
- phase At what phase do you want the waving to begin? If you try different numbers, you'll set the difference.
- strength How strong do you want the filter? Again, higher numbers are stronger.
Keep in mind that this effect only works on IE browsers 4.0 or
better, but feel free to use the commands regardless. Browsers
that do not understand the commands will happily ignore them.
Internet Explorer Text and Image Filters - Page 6
Beyond HTML Goodies
Toggling Images and Text in Internet Explorer - Page 8
|
