Adding motion blur to objects in IE5.5+
A lot of DHTML effects these days involve objects animating around the page in some fashion. In, IE5.5+, you can increase the realism of such events, by adding a motion blur to the object as it moves.
The MotionBlur filter
Filters are multimedia effects introduced in IE4, defined initially using CSS. The MotionBlur filter was added to the mix starting in IE5.5, and has a rather unorthodox syntax:
<style type="text/css">
#test{
filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=30,Direction=90)
}
</style>
<img src="mouse.gif" id="test">
Demo:
Original |
MotionBlur added |
As you can see, the right mouse appears to be on the move. The range for Strength for the effect is from 0 and up, where an increase in number increases the length of the blur. Direction is from 0 to 360, or the degree of a circle.
Applicable elements
The MotionBlur filter can be applied to both images and text (defined using a <div>), even a mixture of both. The filter intelligently applies multiple blurs in the last case:
<style type="text/css">
#test2{
filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=30,Direction=115)
}
</style>
<div style="width:150px;height:120px;background-color:lightblue" id="test2"><center>Nice Day</center>
<center><img src="day.gif"></center>
</div>
Demo:
Let's move on to see how to access and alter MotionBlur using scripting.
- Tutorial Introduction
- Programming the MotionBlur filter
