Main > IE Filters reference > Filters > MotionBlur Filter
MotionBlur Filter
Last updated: May 23rd, 2007
The MotionBlur filter causes the content of an object to appear to be in motion.. Defined via IE's CSS filter property, here is its basic syntax:
Syntax:
filter :progid:DXImageTransform.Microsoft.MotionBlur(attribute1=value1, attribute2=value2, etc);
Example using inline CSS:
<div style="width: 90%; filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30);">Some DIV</div>
Syntax via scripting:
//To define a new MotionBlur filter on an element
object.style.filter ="progid:DXImageTransform.Microsoft.MotionBlur(attribute=value1, attribute2=value2)"
To access an existing property within the MotionBlur filter:
object.filters.item("DXImageTransform.Microsoft.MotionBlur").Property1=value1;
//To access an existing property within the MotionBlur filter via the filters[] object
object.filters[x].Property1=value1 //where "x" is the position of the filter within list of filters on element
When getting or setting a specific filter's attribute via scripting, you capitalize the attribute to turn it into a property.
Below lists the attributes/properties of the MotionBlur filter:
MotionBlur Filter attributes (properties)
| Attributes/ Properties |
Description |
| add |
Boolean value that specifies whether the filter image overlays the original image. Default is false.
Valid values: true/ false
|
| enabled |
Sets/ returns whether the filter is enabled or not. Default is true.
Valid values: true/ false
|
| direction |
Sets the angle (direction) of the blur effect. Default is 270
Valid values: 0 - 360, in increments of 45 (degree implied). For example, 0, 45, 90, 135, etc...
Example:
<style type="text/css">
#mycart{
filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=40,Direction=270);
position:relative;
}
</style>
<img id="mycart" src="cart.gif" />
<script type="text/javascript">
function leftrightmove(){
var currentcartpos=parseInt(mycart.style.left)
if (direction=="right"){
if (currentcartpos<300)
mycart.style.left=currentcartpos+5+"px"
else{
direction="left" //go left instead
mycart.filters[0].direction=90 //change filter direction
}
}
else if (direction=="left"){
if (currentcartpos>0)
mycart.style.left=currentcartpos-5+"px"
else{
direction="right"
mycart.filters[0].direction=270
}
}
}
var direction="right" //Set cart to go right first
var mycart=document.getElementById("mycart")
var filterscheck=mycart.filters && mycart.filters.length>0 //check if element supports filter/ has at least 1 filter defined
if (filterscheck){ //if filters supported
mycart.style.left=0
setInterval("leftrightmove()",20)
}
</script>
Demo:
|
| strength |
Sets the strength, or distance (in pixels) in which the blur spreads. Default is 5.
Valid values: Integer greater than 0.
Example:
<div style="width:150px; height:120px; filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=50, Direction=270)">
<img src="cart.gif" /><br />
Lets go shopping!
</div>
Demo:
Lets go shopping!
|
