Scribd
Upload
5K views20 pages

Filters and Transitions

This document discusses filters and transitions in dynamic HTML that can be used to add visual effects to web pages. Filters can be used to modify images and text permanently or temporarily during transitions between pages. The filters discussed include filters for flipping, transparency, masks, gradients, shadows, glows, blurs, waves, and lighting effects. Transitions let pages change with visual effects like fading or sliding.

Uploaded by

esakkitce
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5K views20 pages

Filters and Transitions

This document discusses filters and transitions in dynamic HTML that can be used to add visual effects to web pages. Filters can be used to modify images and text permanently or temporarily during transitions between pages. The filters discussed include filters for flipping, transparency, masks, gradients, shadows, glows, blurs, waves, and lighting effects. Transitions let pages change with visual effects like fading or sliding.

Uploaded by

esakkitce
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Internet Systems

Chapter 17. Dynamic HTML: Filters and Transitions


Filters and transitions give the same kind of graphics capabilities
offered by presentation software like PowerPoint.
Applying a filter to text or an image causes permanent changes.
Transitions are temporary – they let you transfer from one page to
another with special visual effects.
DHTML filters and transitions are built into Internet Explorer – they’re
included with the CSS filter property.
Special graphics packages aren’t needed to generate images.
No separate download for images is needed.
All visual effects achieved by filters and transitions are programmable.
So they may be modified dynamically by code that responds to user-
initiated events.

Flip Filters: flipv and fliph


The flipv and fliph filters mirror text and images vertically and
horizontally, respectively.
Example:
<TABLE STYLE = "font-size: 3em; width: 20%">
<TR STYLE = "text-align: center">
<TD>G</TD>
<TD STYLE = "filter: fliph">G</TD>
<TD STYLE = "filter: flipv">G</TD>
<TD STYLE = "filter: fliph flipv">G</TD>
</TR>
</TABLE>

184
Internet Systems

Transparency with the chroma Filter


The chroma filter lets us apply transparency effects dynamically.
That is, you can select a color that will let any background color
or picture show through – i.e., the color becomes transparent.

In the STYLE attribute of an IMG element, include


“filter: chroma” – e.g.,
<IMG ID = “img” SRD = “pic.gif”
STYLE = “filter: chroma”>

We may then, in the script, access the chroma filter of this


element with
img.filters( “chroma” )

In particular, we may set the color property of this filter to a


color we want transparent – e.g.,
img.filters( "chroma" ).color =
parseInt( "FFFF00", 16);

Each filter has an enabled property: the filter is applied if and


only if this property is set to true.

So, to turn on the chroma filter (which should be on unless we


set the enabled property to false), we use
img.filters( "chroma" ).enabled = true;

185
Internet Systems

Creating Image Masks


In an image mask, the background of an element is a solid color.
The foreground of the element is transparent to the image or color
behind it.
The mask filter lets you create an image mask.
In general, a parameter for a filter is specified with the syntax
filter_name( parameter_name = value, … )
For example, to create an image mask with a gray background, include
in the value for the STYLE property of the element
filter: mask( color = #A0A0A0 )
The usual content of the element is the foreground of the mask.
Position properties in the STYLE value can be used to place the mask
over an image or text.
Example:
<BODY>
<DIV STYLE = "position: absolute;
top: 12; left: 90;
filter: mask( color = #A0A0A0 )">
<H1 STYLE = "font-size: 6em">
MMM</H1>
</DIV>
<IMG SRC = "Bars.bmp">
</BODY>

186
Internet Systems

Simple Image Effects


The invert filter applies a negative (or inverse) image effect to
images or text – dark areas become light and vice versa.

Example:
<IMG SRC = “pic.jpg”
STYLE = “filter: invert”>

The gray filter applies a grayscale image effect.

The xray filter inverts the grayscale effect.

Adding Shadows to Text


The shadow filter creates a shadow effect, giving text a three-
dimensional effect.

To get the effect, this filter must be used with the position property.

You should also include padding to give room for the shadow to
move out beyond the text.

Two parameters for this filter are generally used:


color: the color of the shadow
315 0 45
direction: the direction in which the
shadow falls – one of eight equally 270 90
spaced clockwise offsets from the
vertical, in degrees. 225 135
180

187
Internet Systems

Example:

<BODY>
<P STYLE = "position: absolute;
padding: 10;
font-size = 2em;
filter: shadow( direction = 0,
color = gray )">
M M M</P>
<P STYLE = "position: absolute; top: 50;
padding: 10;
font-size = 2em;
filter: shadow( direction = 90,
color = gray )">
M M M</P>
</BODY>

188
Internet Systems

Creating Gradients with alpha


A gradient effect is a gradual progression from one shade (or
color) to another.
The alpha filter gives a gradient effect in the opacity of an element.
It is also used for transparency effects not achievable with the
chroma filter.
This filter must be used with the position property.

The parameters for the alpha filter are:


opacity: a value 0-100 giving the percent opacity at the
beginning of the gradient.
finshopacity: a value 0-100 giving the percent opacity at
the end of the gradient.
style: specifies the style of opacity applied:
0: uniform opacity
1: linear gradient
2: circular gradient
3: rectangular gradient
The following is needed for the next example.
In the script, we can access the values of filter parameters with the
following syntax:
element.filters( “filter_name” ).property
For example, suppose in the body we have
<DIV ID = “pic” STYLE =
“… filter: alpha( … )”>
… </DIV>
Then, in the script in the heading, we may use
pic.filters( “alpha” ).finishopacity = 0;

189
Internet Systems

Example:

<HTML>
<HEAD>
<TITLE>alpha Filter</TITLE>
<SCRIPT>
function start()
{
pic.filters( "alpha" ).finishopacity = 0;
}
</SCRIPT>
</HEAD>
<BODY ONLOAD = "start()">
<DIV ID = "pic"
STYLE = "position: absolute;
filter: alpha( style = 1,
opacity = 100)">
<IMG SRC = "Bars.bmp">
</BODY>
</HTML>

190
Internet Systems

The glow Filter


The glow filter adds an aura of color around text.

Parameters:
color: the color of the aura
strength: the strength of the aura

When the strength is set high, the effect is often clipped by the
border of the element.
Padding overcomes this.

The blur Filter


The blur filter has the visual effect of rendering text or images
out of focus.
It can create the illusion of motion.

Parameters:
strength: how much out of focus the text or image is
add: if true, a copy of the original image is superimposed on
the blurred one (which gives something like a shadow effect)
direction: the direction in which the rendering of the
element is smudged – one of eight equally spaced clockwise
offsets from the vertical (in degrees), just as with the shadow
filter.

191
Internet Systems

The wave Filter


The wave filter applies sine-wave distortions to text and images.
Where d is the distance from the left end of the element (at the
right end d = 1), sin(d) is the amount the rendering at d is bent
(left or right).

Parameters:
freq: the frequency of the sine wave
phase: the phase shift of the sine wave
strength: the amplitude of the sine wave
add: if true, superimposes the filtered effect on the original
image – useful only with images

192
Internet Systems

The dropShadow and light Filters


The dropShadow filter creates a blacked-out version of
an image, placing it behind the image.

Parameters:
offx / offy: the offset in number of pixels
color: the color of the drop shadow.

Example:
<IMG SRC = “pic.gif” STYLE = “…
filter: dropShadow( offsetx = 50,
offsety = 75, color = black)”>

193
Internet Systems

The light filter lets us simulate the effect of a light source


shining on an element.
The simulated illumination causes increasing shading away from
the target.
For example, a light filter has no effect on a pure black element.

A light filter is usually introduced into an element without


parameters – e.g.,
<BODY STYLE = “filter: light”>

Light sources are added and modified by applying methods of the


light filter.

To add a point light source, use the method


addPoint( x, y, height, red, green, blue, strength ),
where (with all dimensions in pixels)
x, y are the coordinates where the light source is added,
height is how far the light source is above the page,
red, green, blue are the RGB values of the light in decimal
(FF16 = 25510), and
strength is the strength percentage of the source.

Example:
document.body.filters( "light" ).addPoint(
200, 125, 300, 255, 255, 255, 100)

194
Internet Systems

To add a cone light source, use the method


addCone( x, y, height, x_target, y_target, red, green,
blue, strength, spread),
where (with all dimensions in pixels)
x, y, height, red, green, blue, strength are as for addPoint,
x_target, y_target are the coordinates at which the source is
directed, and
spread is the spread of the light, in degrees (0-90).

Example:
document.body.filters( "light" ).addCone(
100, 300, 200, 200, 0,
255, 255, 255, 100, 30)

195
Internet Systems

To update the position of a point light source or the position of the


target of a cone light source, use the method
moveLight( index, x, y, height, abs_position_flag ),
where (with all dimensions in pixels)
index is the index of the light source on the page (in the order
in which they were created, starting with 0),
x, y are the coordinates to which the point source is moved or
to which the cone source’s target is moved,
height is the height to which the source is moved, and
abs_position_flag being 1 indicates that the other values are
absolute, and being 0 indicates that they (still in pixels) are
relative to the position before the move.

Example:
A typical absolute move would be
document.body.filters( "light" ).moveLight(
1, 400, 100, 100, 1)
A typical relative move would be
document.body.filters( "light" ).moveLight(
0,200,0,-100,0)

196
Internet Systems

Example:
The following creates a white-light point source with 100%
strength at (x,y,z) = (200,125,300) when the body successfully
loads.

When the body is clicked, the source moves to


(200,125,300) + (200,0,-100) = (400,125,200)

<HTML>
<HEAD>
<TITLE>Light Point</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function start()
{
document.body.filters( "light" ).addPoint(
200, 125, 300, 255, 255, 255, 100 )
}
function changeLight()
{
document.body.filters( "light" ).moveLight(
0, 200, 0, -100, 0 )
}
</SCRIPT>
</HEAD>
<BODY BACKGROUND = "Bars.bmp" ONLOAD = "start()"
STYLE = "filter: light"
ONCLICK = "changeLight()">
</BODY>
</HTML>

197
Internet Systems

The following appears when the page is loaded.

The following appears after the body is clicked.

198
Internet Systems

Example:
The following, when the file is loaded, creates two white-light cone
sources, both with 100% strength and 30o spread.
The first source is at (x,y,z) = (100,300,200), directed at
(x,y) = (200,0) on the page
The second is at (400,300,200), directed at (300,0).
When the body is clicked, the target of the first is moved (with absolute
positioning) to (100,100), and that of the second to (400,100).
The heights of both sources go down to 100.

<HTML>
<HEAD>
<TITLE>Light</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function start()
{
document.body.filters( "light" ).addCone(
100,300,200, 200,0, 255,255,255, 100, 30)
document.body.filters( "light" ).addCone(
400,300,200, 300,0, 255,255,255, 100, 30)
}
function changeLight()
{
document.body.filters( "light" ).moveLight(
0, 100, 100, 100, 1)
document.body.filters( "light" ).moveLight(
1, 400, 100, 100, 1)
}
</SCRIPT>
</HEAD>
<BODY BACKGROUND = "Bars.bmp" ONLOAD = "start()"
STYLE = "filter: light"
ONCLICK = "changeLight()">
</BODY>
</HTML>

199
Internet Systems

The following appears when the page is loaded.

The following appears when the body is clicked.

200
Internet Systems

Transitions
Explorer 5’s transitions allow many scriptable PowerPoint-like effects.

Transitions, like regular filters, are values of the CSS filter


property.
The value of the duration parameter of a transition is the
duration in seconds of the transition’s effect.
As an example, consider the blendTrans transition, which
creates a fade-in or fade-out effect.
STYLE = “… filter: blendTrans( duration = 1)”

A transition is typically initialized and started in a script with the


following sequence.
Invoke the apply() methods to initialize (but not start) the
transition.
Set the style.visibility property of the element to either
• “hidden” if the transition is in the direction of hiding the
element or
• “visible” it the transition is in the direction of making it
visible.
Invoke the play() method to start the transition.
Using blendTrans again for an example:
text.filters( "blendTrans" ).apply();
text.style.visibility = "hidden";
text.filters( "blendTrans" ).play();
If an element has become hidden, it can be revealed by setting the
style.visibility property to “visible” (which
doesn’t require a transition).
A visible element can be similarly hidden.

201
Internet Systems

Event ONFILTERCHANGE fires when a transition completes.


This allows us to follow one transition with another.
You should generally set the position or width CSS property
in the element where a transition filter is set; otherwise, a run-
time error may result.

Example:
The following causes a P element with content TEXT to fade out over
one second, then fade in over one second, then repeat indefinitely.

<HTML>
<HEAD>
<TITLE>Fading Text</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
var direction = true;
function fade()
{
text.filters( "blendTrans" ).apply();
text.style.visibility =
direction ? "hidden" : "visible";
text.filters( "blendTrans" ).play();
direction = ! direction;
}
</SCRIPT>
</HEAD>
<BODY ONLOAD = "fade()">
<P ID = "text" ONFILTERCHANGE = "fade()"
STYLE = "width: 300;
filter: blendTrans( duration = 1 )">
TEXT</P>
</BODY>
</HTML>

202
Internet Systems

The revealTrans transition lets you gradually reveal or


gradually hide an image or text using a pattern that grows to fill
the element.
There are 24 patterns, numbered 0-23.

Before revealTrans is initialized with apply(), you must set


the transition property of the revealTrans filter to one
of these numbers.

For example,
6 (wipe right) grows the pattern from left to right, and
16 (split) starts with a horizontal line through the middle of the
element, which spreads up and down.

See Figure 17.4, pp. 592-596, of the text for all 24 patterns and
examples of the effects of some.

203

You might also like