Filters and Transitions
Introduction
When Microsoft released Internet Explorer 4 they included a selection of filters and transitions that allow multimedia-style effects in plain HTML web pages. They can be applied to any HTML control, such as DIV tags, form fields or images. Internet Explorer 5 for Windows built on the existing functionality with more advanced transitions and a different method of applying filters. To see the examples in this tutorial you have to be using Internet Explorer 4+.
Static Filters
Internet Explorer 4+
The static filters can be applied to any HTML control through the style tag:
<div id="drop" style="filter: DropShadow(Color=red, OffX=2, OffY=2, Positive=1); width: 100; height:20;">hello</div>
or at runtime through javascript:
document.all["drop"].style.filter = "DropShadow(Color=red, OffX=2, OffY=2, Positive=1)";
both produce this
red drop shadow(note: for some reason you must specify the width and height attributes for the filter to work)
| Here is a list of the filters you can use: | |
| » alpha | alpha blending (aka transparency) |
| » blur | motion blur |
| » chroma | makes a specified colour transparent |
| » dropShadow | creates a silhouette of the object |
| » flipH | flips the contents of the object horizontally |
| » flipV | flips the contents of the object vertically |
| » glow | creates a glow effect for the object |
| » gray | converts contents to grayscale |
| » invert | inverts the colours of the object |
| » mask | produces a mask of a specified colour |
| » shadow | like drop shadow except edges are blurred |
| » wave | adds a ripple to the image |
| » x-ray | seems to be like an OR function |
The best way to use these filter properties is to use WebFX’s Filter Tool, you can also check the Microsoft Documentation, except this has been updated to work with the IE5.5+ method of applying filters.
Internet Explorer 5.5+
With IE5 Microsoft have changed the way filters are applied, they still use the filter property of the style tag, but uses different syntax. In HTML:
style="filter:progid:DXImageTransform.Microsoft.DropShadow(Color=red, OffX=2, OffY=2, Positive=1)”;
and from code:
document.all["drop"].style.filter = "progid:DXImageTransform.Microsoft.DropShadow(Color=red, OffX=2, OffY=2, Positive=1)”;
If you look at the Microsoft Documentation you will notice several other filters such as Light, Compositor and Matrix. These work a little differently than the others and probably best if you look at the specific documentation when you are interested.
Transitions
These (as far as I am aware) only work in Internet Explorer 5.5+ for Windows. It is therefore necessary to start off with a browser and OS check. See the DHTML library tutorial for more info about that.
| First off here is a list of the transitions that you can use: | |
| » barn | resembles a door opening or closing |
| » blinds | appears to open or close blinds |
| » checkerBoard | squares are uncovered like a checkerboard over original content |
| » fade | fades new content in |
| » gradientWipe | passes a gradient band over the old content |
| » inset | reveals new content diagonally |
| » iris | produces an effect like the opening of a camera |
| » radialWipe | like a windscreen wiper |
| » randomBars | exposes random lines of pixels one at a time |
| » randomDissolve | exposes random pixels one at a time |
| » slide | new content slides in over old content |
| » spiral | reveals new content in a spiral motion |
| » stretch | stretching motion to cover original content; like a cube rotating |
| » strips | moves successive strips into place |
| » wheel | like spokes of a wheel uncovering new content |
| » zigzag | reveals new content with a forward and backwards motion down the object |
Now we need to know how to use them. To find the properties of each transition look at the Microsoft Documentation (if I find the time I may make a utility similar to the WebFX one linked above).
We’ll start off with the fade transition that takes a single property “duration”:
All that is gold does not glitter,
Not all those who wander are lost;
The old that is strong does not wither,
Deep roots are not reached by the frost. do fade
Now here is the function that does the above:
function doFadeImage() {
//create object reference
var el = document.all["divFader"];
//add the filter to the style tag
el.style.filter = "progid:DXImageTransform.Microsoft.Fade(duration=1)";
//apply the filter
el.filters[0].apply();
//change the object
if(state) {
el.style.backgroundColor = "#BDAA91";
el.style.color = "#000000";
el.innerHTML = verse1;
state = 0;
} else {
el.style.backgroundColor = "#000000";
el.style.color = "#BDAA91";
el.innerHTML = verse2;
state = 1;
}
//play the filter
el.filters[0].play();
}
Now this may seem a bit complicated so I’ll brake it down into 4 important stages:
1. Add the filter to the style attribute, either through code or in the HTML
2. Use the code el.filters[0].apply(); to initiate the transition
3. Make the changes to the object through code
4. Play the changes using el.filters[0].play();
To see how to use transitions with the CoolMenus script check example 14 where you can try all the different filters.
Good luck!
Appendix A - The Matrix Transformation
In the field of Computer Graphics matrices are used to speed up and simplify certain calculations. For example, your 3D-graphcs card has special hardware that uses a 4×4 matrix to rotate, translate or stretch points in 3-dimensions, thus speeding up calculations that are normally done by the main processor.
In Internet Explorer 5, Microsoft have included a Matrix Filter. This, obviously, only works in 2-dimensions but it can be used to apply a transformation to all pixels in an object.
Matrix Math
To get you started here is a brief introduction to 2D matrix multiplication:
| x | * | a | b | = | x*a + y*b |
| y | c | d | x*c + y*d |
Now, if this is applied to each pixel in an image, we can get some very interesting results.
Example: rotation
In order to rotate a point around the origin (0,0) you can find the new values of x and y using the following equations (if you don’t believe here’s a proof for one of the equations):
newX = x*cos(Ø) - y*sin(Ø) newY = x*sin(Ø) + y*cos(Ø)
Now it can be seen that we can use the following matrix to rotate a point:
| x | * | cos(Ø) | -sin(Ø) | = | x*cos(Ø) - y*sin(Ø) |
| y | sin(Ø) | cos(Ø) | x*sin(Ø) + y*cos(Ø) |
Using the Matrix Filter
| Here is list of the matrix filter’s properties: | |
| » FilterType | bilinear - uses an average of the 4 nearest pixels; smoother but slower nearest - nearest neighbour, uses best approximation, faster but jagged |
| » SizingMethod | clip to original - if transformed image exceeds the initial dimensions it will be clipped to fit auto expand - automatically increases/decreases size of container |
| » M11, M12, M21, M22 | the values of the 2D-matrix (a,b,c,d as above) |
| » Dx, Dy | used for linear transformations |
The matrix filter can be applied through either the style tag or using code. To apply it using the style tag apply the properties use the same method that is described for normal filters. In code it is slightly different:
var el = document.getElementById(name);
el.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";
el.filters.item("DXImageTransform.Microsoft.Matrix").[property] = [value];
Example
Example only works on explorer 5+ on windows. This example uses the rotation matrix described above to cause the box to spin. It should be noted that the code has to take into account that the dimensions of the container change size in order to keep the box centred.
Here’s the code for the function that will rotate an object by an arbitrary angle:
function rotate(name, angle){ //convert angle into radians
var rad = degToRad(angle);
//calculate cos and sin of the angle
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
//create object reference
var el = document.getElementById(name);
if(el) {
//apply the filter
el.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";
//set up the properties
el.filters.item("DXImageTransform.Microsoft.Matrix").SizingMethod = "auto expand";
el.filters.item("DXImageTransform.Microsoft.Matrix").FilterType = "bilinear";
//apply the rotation matrix transformation
el.filters.item("DXImageTransform.Microsoft.Matrix").M11 = costheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M12 = -sintheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M21 = sintheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M22 = costheta;
}
}
This code calls the rotation function and recentres the DIV. In order to do this we need to use the offset values since the style’s properties aren’t updated:
var angle = 0;
function doRotate() {
//check to make sure angle is between 0 and 360 degrees
if(angle>360) angle-=360;
//increment angle
angle+=15;
//do rotation
rotate("aDiv",angle);
//recentre div using offset values
var el = document.getElementById("aDiv");
el.style.top = 25 - (el.offsetHeight/2);
el.style.left = 25 - (el.offsetWidth/2);
setTimeout("doRotate();",10);
}
And there you have it! Have fun playing, and if you want to get further information on the Matrix Filter visit the MSDN site.