Chapter 15Dynamic HTML: Filters and Transitions

OutlineIntroductionFlip Filters: flipv and fliphTransparency with the chroma FilterCreating Image masksMiscellaneous Image Filters: invert, gray and xrayAdding shadows to TextCreating Gradients with alphaMaking Text glowCreating Motion with blurUsing the wave FilterblendTrans Transition

IntroductionBetter visual effectsRequire IE 4.0+ FiltersCause changes that are persistentTransitionsTemporaryAllow transfer from one page to another with pleasant visual effect

next: filters

Flip Filters: flipv and fliphflipv and fliph filters mirror text or images vertically and horizontally, respectively

Text Text

Text Text

Transparency with the chroma Filterchroma filter applies transparency effects dynamicallyWithout using a graphics editor to hard-code transparency into the imagee.g. onchangeFires when the value of a form changes

chroma.html(1 of 3)

1

2

4

5

6

7

8

9

10 Chroma Filter

11

12

13

chroma.html(2 of 3)

26 // -->

27

28

29

30

31

32 Chroma Filter:

33

34

37

38

39

40

41

42 None

43 Cyan

44 Yellow

45 Magenta

46

47 Black

48

49

50

51

52

Creating Image masksUsing the mask filter to create an effect:Background is a solid colorForeground is transparent to the image or color behind ite.g. "Now, Stop That!." Renders the span element with the specified background color (red), and transparent foreground color

mask.html(1 of 2)

1

2

4

5

6

7

8

9

10 Mask Filter

11

12

13

14

15 Mask Filter

16

17

18

19

20

22

23 AaBbCcDdEeFfGgHhIiJj

24 KkLlMmNnOoPpQqRrSsTt

25

26

27

28

30

31

More Image Filters: invert, gray and xrayinvert filterNegative image effectDark areas become light and light areas become darkgray filterGrayscale image effectAll color is stripped from the image, only brightness data remainsxray filterX-ray effectInversion of the grayscale effect

Normal Grayscale Xray Invert

Adding shadows to Textshadow filteradds depth to textShowing effectThree-dimensional appearance

shadow.html(1 of 2)

1

2

4

5

6

7

8

9

10 Shadow Filter

11

12

13

shadow.html(2 of 2)

25 shadowText.filters( "shadow" ).direction =

26 ( shadowDirection % 360 );

27 shadowDirection += 45;

28 }

29 // -->

30

31

32

33

34

35 Shadow Direction: 0

38

39

Creating Gradients with alphaalpha filterGradient effectGradual progression from starting color to target colorProperties:opacity, finishopacity, style, startx, starty, finishx, finishy opacity and finishopacitydetermine at what percent opacity the gradient starts and finishesstyleUniform opacity (value 0)Linear gradient (value 1)Circular gradient (value 2)Rectangular gradient (value 3)

alpha.html(1 of 3)

1

2

4

5

6

7

8

9

10 Alpha Filter

11

12

21

22

23

24

25

alpha.html(2 of 3)

26

30

31

32

33

35

36

37 Opacity (0-100):

38

40

41

42

43 FinishOpacity (0-100):

44

46

47

48

49 Style:

50

alpha.html(3 of 3)

51 Linear

52

53 Circular

54 Rectangular

55

56

57

58

59

60

62

63

64

65

66

67

Making Text glowglow filter adds an aura of color around texte.g. Glowing Text

Creating Motion with blurblur filter creates an illusion of motion by blurring text or images in a certain directionAddAdds a copy of the original image over the blurred imageDirectionDetermines in which direction the blur filter is appliedstrengthDetermines how strong the blurring effect is

Creating Motion with blurExamples:

"SunShine!"

Using the wave Filterwave filter allows user to apply sine-wave distortions to text and images on Web pagesaddAdds a copy of the text or image underneath the filtered effectfreqDetermines the frequency of the wave appliedphaseIndicates the phase shift of the wave

wave.html(1 of 2)

1

2

4

5

6

7

8

9

10 Wave Filter

11

12

13

wave.html(2 of 2)

26 // -->

27

28

29

30

31

32

37 Here is some waaaavy text

38

39

40

41

blendTrans TransitionExample of the blendTrans transitionCreates a smooth fade-in/fade-out effect

blendtrans.html(1 of 2)

1

2

4

5

6

7

8

9

10 Using blendTrans

11

12

13

21

22

23

24

25

26

28 Some fading text

29

30

31

32

Resourceshttp://www.fred.net/dhark/demos/css/css_filter_examples.htmlhttp://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm