Visual Filters and Transitions Reference

As of Microsoft® Internet Explorer 4.0, you can apply multimedia-style effects to your Web pages using visual filters and transitions. You can apply visual filters and transitions to standard HTML controls, such as text containers, images, and other windowless objects. Transitions are time-varying filters that create a transition from one visual state to another. By combining filters and transitions with basic scripting, you can create visually engaging and interactive documents.

Internet Explorer 5.5 and later supports a rich variety of optimized filters. Click the following button to see a demonstration of many of these filters and how to use them.

This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

The links in the following sections provide access to the object model exposed by the visual filters and transitions.

Procedural Surfaces Reference

Procedural surfaces are colored surfaces that display between the content of an object and the object's background. Procedural surfaces define each pixel's RGB color and alpha values dynamically. Only the procedure used to compute the surface is stored in memory. The content of an object with a procedural surface applied is not affected by the procedural surface.

Procedural Surfaces

AlphaImageLoader

Displays an image within the boundaries of the object and between the object background and content, with options to clip or resize the image. When loading a Portable Network Graphics (PNG) image, tranparency—from zero to 100 percent—is supported.

Gradient

Displays a colored surface between the object's background and content.

Static Filters Reference

Though all filters and transitions are technically filters, the following filters statically change the way the content of an object displays. The Compositor filter is implemented as a transition, but gives only a static output.

Static Filters

Alpha

Adjusts the opacity of the content of the object.

BasicImage

Adjusts the color processing, image rotation, or opacity of the content of the object.

Blur

Blurs the content of the object so that it appears out of focus.

Chroma

Displays a specific color of the content of the object as transparent.

Compositor

Displays new content of the object as a logical color combination of the new and original content. The color and alpha values of each version of the content are evaluated to determine the final color on the output image.

DropShadow

Creates a solid silhouette of the content of the object, offset in the specified direction. This creates the illusion that the content is floating and casting a shadow.

Emboss

Displays the content of the object as an embossed texture using grayscale values.

Engrave

Displays the content of the object as an engraved texture using grayscale values.

Glow

Adds radiance around the outside edges of the content of the object so that it appears to glow.

ICMFilter

Converts the color content of the object based on an Image Color Management (ICM) profile. This enables improved display of specific content, or simulated display for hardware devices, such as printers or monitors.

Light

Creates the effect of a light shining on the content of the object.

MaskFilter

Displays transparent pixels of the object content as a color mask, and makes the nontransparent pixels transparent.

Matrix

Resizes, rotates, or reverses the content of the object using matrix transformation.

MotionBlur

Causes the content of the object to appear to be in motion.

Shadow

Creates a solid silhouette of the content of the object, offset in the specified direction. This creates the illusion of a shadow.

Wave

Performs a sine wave distortion of the content of the object along the vertical axis.

Transitions Reference

Transitions are filters that reveal new content of an object with a particular visual effect. Use the apply and play filters to initiate the visual effect.

Transitions

Barn

Reveals new content of the object with a motion that resembles doors opening or closing.

Blinds

Reveals new content of the object with a motion that appears to open or close blinds.

CheckerBoard

Reveals new content of the object by uncovering squares placed like a checkerboard over the original content.

Fade

Reveals new content of the object by fading out the original content.

GradientWipe

Reveals new content of the object by passing a gradient band over the original content.

Inset

Reveals new content of the object diagonally.

Iris

Reveals new content of the object with an iris effect, similar to the opening of a camera aperture.

Pixelate

Displays the content of the object as colored squares that take the average color value of the pixels they replace. This filtered display can be used as a transition.

RadialWipe

Reveals new content of the object with a radial wipe, like a windshield-wiper blade.

RandomBars

Reveals new content of the object by exposing random lines of pixels.

RandomDissolve

Reveals new content of the object by exposing random pixels.

Slide

Reveals new content of the object by sliding sections of the image into place.

Spiral

Reveals new content of the object with a spiral motion.

Stretch

Reveals new content of the object with a stretching motion to cover the original content. One option resembles a cube rotating from one face to another.

Strips

Reveals new content of the object by moving successive strips into place, like a diagonal saw blade passing across the original content.

Wheel

Reveals new content of the object with a rotating motion, like spokes of a wheel covering the original content.

Zigzag

Reveals new content of the object with a forward and back motion that moves down the object.

Attributes/filters Reference

The following filters apply to one or more filters. When you move the pointer over a property name, the pop-up information that appears lists the filters that the property applies to.

Attributes/filters

Add

Sets or retrieves a value that indicates whether the filter image overlays the original image.

bands

Sets or retrieves the number of strips into which the content is divided during the transition.

Bias

Sets or retrieves a percentage of a value that is added to each color component of the filtered result.

Color

Sets or retrieves the value of the color applied with the filter.

Color

Sets or retrieves the value of the color applied with the filter.

ColorSpace

Sets or retrieves the name and path for a particular .icm color mapping profile. With a profile assigned, the filtered output simulates the graphical output of devices that use the assigned profile.

Direction

Sets or retrieves the direction that the filter's effect is offset.

Direction

Sets or retrieves the direction of motion in the transition.

Duration

Sets or retrieves the length of time the transition takes to complete.

Dx

Sets or retrieves the X component of the augmenting vector for linear transformations.

Dy

Sets or retrieves the Y component of the augmenting vector for linear transformations.

Enabled

Sets or retrieves a value that indicates whether the filter is enabled.

EndColor

Sets or retrieves the final opaque color for a gradient surface.

EndColorStr

Sets or retrieves the final color for a gradient surface.

filter

Sets or retrieves the filter or collection of filters applied to the object.

FilterType

Sets or retrieves the method used to define pixels of new content.

FinishOpacity

Sets or retrieves the opacity level at the end of the gradient applied with the Alpha filter.

FinishX

Sets or retrieves the horizontal position at which the opacity gradient ends.

FinishY

Sets or retrieves the vertical position at which the opacity gradient ends.

Freq

Sets or retrieves the number of waves created by the Wave filter.

Function

Sets or retrieves the compositing operation to perform.

GradientSize

Sets or retrieves the percentage of the object that is covered by the gradient band.

GradientType

Sets or retrieves the orientation of the gradient.

GrayScale

Sets or retrieves the value that indicates whether content is displayed as the average of the RGB component values.

GridSizeX

Sets or retrieves the number of grid columns used for the filter. The value can range from 1 to 100.

GridSizeY

Sets or retrieves the number of grid rows used for the filter. The value can range from 1 to 100.

Intent

Sets or retreives the intended purpose for the color content of the object. The filter adjusts the color output to improve the display of content with the selected purpose.

Invert

Sets or retrieves the value that indicates whether the content is displayed as the complement of the RGB component values.

IrisStyle

Sets or retrieves the shape of the Iris filter aperture.

LightStrength

Sets or retrieves the difference in light intensity between the peaks and troughs of the waves created by the Wave filter.

M11

Sets or retrieves the first row/first column matrix entry for linear transformations.

M12

Sets or retrieves the first row/second column matrix entry for linear transformations.

M21

Sets or retrieves the second row/first column matrix entry for linear transformations.

M22

Sets or retrieves the second row/second column matrix entry for linear transformations.

MakeShadow

Sets or retrieves the value that indicates whether content is displayed as a shadow.

Mask

Sets or retrieves whether transparent content of an object is changed to the MaskColor value.

MaskColor

Sets or retrieves the color used to mask transparent content of an object.

MaxSquare

Sets or retrieves the maximum width in pixels of a pixelated square.

Mirror

Sets or retrieves the value that indicates whether the content display is reversed.

Motion

Sets or retrieves the corner from which new content is revealed during a Strips transition.

Motion

Sets or retrieves a value that indicates whether content is revealed as defined by the WipeStyle property setting, or in the opposite direction.

Motion

Sets or retrieves the value that indicates whether new content is revealed from the outside or the inside first.

OffX

Sets or retrieves the value that the drop shadow is offset from the object along the x-axis.

OffY

Sets or retrieves the value that the drop shadow is offset from the object along the y-axis.

Opacity

Sets or retrieves the opacity level that is applied to the content of an object.

Opacity

Sets or retrieves the opacity level at the beginning of the gradient applied with the Alpha filter.

Orientation

Sets or retrieves the value that indicates whether the filter effect is horizontal or vertical.

Overlap

Sets or retrieves the fraction of the transition's duration that both original and new content are displayed.

Percent

Sets or retrieves the point in a transition at which to capture the display for a static filter output.

Phase

Sets or retrieves the phase offset at which the sine wave starts.

PixelRadius

Sets or retrieves the radius of the area of opaque content around a pixel that is affected by the Blur filter.

Positive

Sets or retrieves the value that indicates whether the filter creates a drop shadow from the nontransparent pixels of the object.

Rotation

Sets or retrieves the value that indicates whether the content is rotated in ninety-degree increments.

ShadowOpacity

Sets or retrieves the opacity level of a shadow created by the Blur filter.

sizingMethod

Sets or retrieves the manner in which to display an image within the boundary of the object that the AlphaImageLoader filter is applied to.

SizingMethod

Sets or retrieves a value that indicates whether the container is resized to fit the resulting image.

SlideStyle

Sets or retrieves the method used to reveal the new content.

spokes

Sets or retrieves the number of wedges that the content is divided into during the transition.

SquaresX

Sets or retrieves the number of columns for the CheckerBoard transition.

SquaresY

Sets or retrieves the number of rows for the CheckerBoard transition.

src

Sets or retrieves the URL of an image that the AlphaImageLoader filter loads.

StartColor

Sets or retrieves the initial opaque color for a gradient surface.

StartColorStr

Sets or retrieves the initial color for a gradient surface.

StartX

Sets or retrieves the horizontal position at which the opacity gradient starts.

StartY

Sets or retrieves the vertical position at which the opacity gradient starts.

status

Retrieves the state of the transition.

Strength

Sets or retrieves the distance, in pixels, that a filter effect extends.

StretchStyle

Sets or retrieves the method used to reveal the new content.

Style

Sets or retrieves the shape characteristics of the opacity gradient.

Transition

Sets or retrieves the type of transition.

WipeStyle

Sets or retrieves the method used to reveal the new content.

WipeStyle

Sets or retrieves a value that indicates whether the gradient band moves vertically or horizontally.

XRay

Sets or retrieves the value that indicates whether the content is displayed as a grayscale defined by the complement of the average red and green component values.

filters Reference

filters

addAmbient

Adds an ambient light to the Light filter.

addCone

Adds a cone light to the Light filter effect object to cast a directional light on the page.

addPoint

Adds a light source to the Light filter.The light source originates at a single point and radiates in all directions.

apply

Captures the initial display of an object's content for a transition.

changeColor

Changes the color of a Light filter's light.

changeStrength

Changes the intensity of a light applied with the Light filter.

clear

Deletes all lights associated with the Light filter.

elementImage

Not currently supported.

moveLight

Moves the focus for cone lights or the origin for point lights that are applied with the Light filter.

play

Plays the transition.

stop

Stops transition playback.

Events Reference

The onfilterchange fires when a filter's filters change state or when a filter completes a transition.

Events

onfilterchange

Fires when a visual filter changes state or completes a transition.

Related Topics

• Introduction to Filters and Transitions