Chapter 15DHTML: Filters and Transitions

CIS 275—Web Application Development for Business I

2

Introduction Some DHTML visual effects

page transitions (random dissolves, vertical blinds) convert colored images to gray to denote selection make letters ______ for emphasis drop shadows for 3D effects ______ text for an illusion of motion

Filters are specified with the CSS _______ property—changes are persistent.

Transitions are temporary changes. The effects of filters and transitions are

programmable (can be made to respond to ______).

Filters and transitions are built into ___.

3

Flip Filters and Transparency

Flip horizontal using the fliph value of the _______ property

<p style = “filter: fliph”>Some text</p>

Flip vertical using the fliph value of the filter property

<p style = “filter: flipv”>Some text</p>

See p. 478 for an example of flipping. Enable an image for applying ____________ to a

specified color <img id=“chromaImg” src=“trans.gif” style=“filter: chroma” alt=“An image” />

See p. 480 for a good example of applying transparency.

4

The mask Filters Applying the mask filter makes an element’s

background a solid color and its foreground ___________.

Another element can then show through the element’s transparent foreground.

Example <p style = “filter: mask”>This text is transparent</p>

<p style = “filter: mask(color = red)”>This text is transparent and the text’s background is red</p>

See p. 482 for a more complex example.

5

Other Image Filters The invert filter applies a _________ image

effect. <img src=pic1.jpg style=“filter: invert” alt=“Pic 1” />

The gray filter applies a __________ image effect.

<img src=pic1.jpg style=“filter: gray” alt=“Pic 1” />

The xray filter applies an inversion of the __________ effect.

<img src=pic1.jpg style=“filter: xray” alt=“Pic 1” />

See p. 483 for an example.

6

Gradients With alpha The alpha filter creates sophisticated

transparency effects. The picture <div id = "pic" style = "filter: alpha(style = 2,

opacity = 100, finishopacity = 0)">

<img src = "flag.gif" alt = "Flag" />

</div>

The new filter applied with onclick = “change()”function change() {

pic.filters( "alpha" ).opacity = 0;

pic.filters( "alpha" ).finishopacity = 100;

pic.filters( "alpha" ).style = 1; // linear gradient

}

7

glow and blur Filters Making text glow (see p. 488) <span id = "glowSpan"

style = "filter: glow( color = red, strength = 5 )>

Glowing Text

</span>

Creating motion with blur (see p. 491)<div id = "blurImage" style = "filter: blur(

add = 0, direction = 0, strength = 0 );

background-color: white;">

<img align = "middle" src = "shapes.gif"

alt = "Shapes" />

</div>

8

Other Filters The wave (see p. 494)<span id = "flag"

style = "filter: wave(add = 0, freq = 1, phase = 0,

strength = 10); font-size: 2em">

Here is some waaaavy text

</span>

dropShadow (see p. 495) <img id = "imageid" src = "circle.gif" style = "filter: dropShadow(offx = 0, offy = 0, color = black)

alt = "Circle Image" />

light (see p. 495)imageid.filters(“light”).addPoint(x, y, height, red, green,

blue, strength);

9

blendTrans blendTrans causes a simple dissolve (p. 500)

HTML<div id = "textInput" onclick = "blendOut()" style =

"width: 300; filter: blendTrans( duration = 3 )">

<h1>Some fading text</h1>

</div>

JavaScriptfunction blendOut()

{

textInput.filters( "blendTrans" ).apply(); // initialize

textInput.style.visibility = "hidden"; // set end state

textInput.filters( "blendTrans" ).play(); // begin

}

A more interesting transition (p. 501)

10

revealTrans revealTrans causes one of 24 different

transitions HTML<div id = "textInput" onclick = "blend()" style =

"width: 300; filter: revealTrans( duration = 3,

transition = 24 )">

<h1>Transition 24: Random</h1>

</div>

JavaScriptfunction blend()

{

textInput.filters( “revealTrans" ).apply(); // initialize

textInput.style.visibility = "hidden"; // set end state

textInput.filters( “revealTrans" ).play(); // begin

}

• A more interesting transition (p. 504)