1. Chapter 15 - Dynamic HTML: Filters and Transitions
Outline
Introduction
Flip Filters: flipv and fliph
Transparency with the chroma Filter
Creating Image masks
Miscellaneous Image Filters: invert, gray and xray
Adding shadows to Text
Creating Gradients with alpha
Making Text glow
Creating Motion with blur
Using the wave Filter
Advanced Filters: dropShadow and light
blendTrans Transition
revealTrans Transition

2. In this lesson, you will learn:
Objectives
In this lesson, you will learn:
To use filters to achieve special effects.
To combine filters to achieve an even greater variety of special effects.
To be able to create animated visual transitions between Web pages.
To be able to modify filters dynamically, using DHTML.

3. 15.1 Introduction Filters Transitions
Cause changes that are persistent
Transitions
Temporary
Allow transfer from one page to another with pleasant visual effect
For example, random dissolve

4. 15.2 Flip Filters: flipv and fliph
flipv and fliph filters mirror text or images vertically and horizontally, respectively

5. flip.html (1 of 2)

6. flip.html (2 of 2)

7. fliph
filter applied
No filters applied
Both
fliph
and
flipv
flipv
filter applied
filters applied

8. 15.3 Transparency with the chroma Filter
chroma filter applies transparency effects dynamically
Without using a graphics editor to hard-code transparency into the image
onchange
Fires when the value of a form changes

9. chroma.html (1 of 3)

10. chroma.html (2 of 3)

11. chroma.html (3 of 3)

12. 15.4  Creating Image masks
Background is a solid color
Foreground is transparent to the image or color behind it

13. mask.html (1 of 2)

14. mask.html (2 of 2)

15. 15.5 Miscellaneous Image Filters: invert, gray and xray
invert filter
Negative image effect
Dark areas become light and light areas become dark
gray filter
Grayscale image effect
All color is stripped from the image, only brightness data remains
xray filter
X-ray effect
Inversion of the grayscale effect

16. misc.html (1 of 2)

17. misc.html (2 of 2)

19. 15.6 Adding shadows to Text shadow filter Showing effect
Three-dimensional appearance

20. shadow.html (1 of 2)

21. shadow.html (2 of 2)

22. 15.7 Creating Gradients with alpha
alpha filter
Gradient effect
Gradual progression from starting color to target color
style
Uniform opacity (value 0)
Linear gradient (value 1)
Circular gradient (value 2)
Rectangular gradient (value 3)

23. alpha.html (1 of 3)

24. alpha.html (2 of 3)

25. alpha.html (3 of 3)

27. 15.8  Making Text glow
glow filter adds an aura of color around text

28. glow.html (1 of 4)

29. glow.html (2 of 4)

30. glow.html (3 of 4)

31. glow.html (4 of 4)

32. 15.9 Creating Motion with blur
blur filter creates an illusion of motion by blurring text or images in a certain direction
Add
Adds a copy of the original image over the blurred image
Direction
Determines in which direction the blur filter is applied
strength
Determines how strong the blurring effect is

33. blur.html (1 of 5)

34. blur.html (2 of 5)

35. blur.html (3 of 5)

36. blur.html (4 of 5)

37. blur.html (5 of 5)

38. 15.10  Using the wave Filter
wave filter allows user to apply sine-wave distortions to text and images on Web pages
add
Adds a copy of the text or image underneath the filtered effect
freq
Determines the frequency of the wave applied
phase
Indicates the phase shift of the wave

39. wave.html (1 of 2)

40. wave.html (2 of 2)

42. 15.11 Advanced Filters: dropShadow and light
Creates a blacked-out version of the image, and places it behind the image
offx and offy properties
Determined by how many pixels the drop shadow is offset
color property
Specifies the color of the drop shadow
light filters
Most powerful and advanced filter in Internet Explorer 6.0
Allows simulation of a light source shining on Web page
All parameters and methods are set by scripting
addPoint
Adds a point light source

43. dropshadow.html (1 of 3)

44. dropshadow.html (2 of 3)

45. dropshadow.html (3 of 3)

46. conelight.html (1 of 3)

47. conelight.html (2 of 3)

48. conelight.html (3 of 3)

49. 15.12 blendTrans Transition
Example of the blendTrans transition
Creates a smooth fade-in/fade-out effect

50. blendtrans.html (1 of 2)

51. blendtrans.html (2 of 2)

52. blendtrans2.html (1 of 3)

53. blendtrans2.html (2 of 3)

54. blendtrans2.html (3 of 3)

56. 15.13 revealTrans Transition
revealTrans filter
Create professional-style transitions
From box out to random dissolve

57. revealtrans.html (1 of 4)

58. revealtrans.html (2 of 4)

59. revealtrans.html (3 of 4)

60. revealtrans.html (4 of 4)