Categories:
Help

CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.

Partners
This is a

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:

Nice Day

Let's move on to see how to access and alter MotionBlur using scripting.