1 / 10

Chapter 15 DHTML: Filters and Transitions

Chapter 15 DHTML: Filters and Transitions. CIS 275—Web Application Development for Business I. Introduction. Some DHTML visual effects page transitions (random dissolves, vertical blinds) convert colored images to gray to denote selection make letters ______ for emphasis

leola
Télécharger la présentation

Chapter 15 DHTML: Filters and Transitions

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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> • JavaScript function 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> • JavaScript function blend() { textInput.filters( “revealTrans" ).apply(); // initialize textInput.style.visibility = "hidden"; // set end state textInput.filters( “revealTrans" ).play(); // begin } • A more interesting transition (p. 504)

More Related