JavaScript Kit
Complete JavaScript Reference

Scripts | JavaScript Tutorials | JavaScript Reference | DOM Reference | Applets | DHTML | Design | Forum | Freewarejava
Reference List

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!