Figure 10-8. Effect.Move animates an element’s position. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 229 Effect.Scale Effect.Scale handles, well, scaling—changing the size of an element (and, optionally, the size of its contents) by a given percentage (see Figure 10-9): new Effect.Scale('box', 150); Figure 10-9. Effect.Scale animates an element’s height and width. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS230 The second argument is an integer that represents the scaling percentage. In this example, the element grows to 150 percent of its original size. (Note that the contents of the box have been scaled as well—the text is also 150 percent bigger.) Effect.Scale also supports several optional parameters for more granular control of the effect (see Figure 10-10): new Effect.Scale('box', 100, { scaleContent: false, scaleFrom: 50.0, scaleFromCenter: true }); Figure 10-10. Effect.Scale is broadly configurable. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 231 First, we have scaleContent, which, when set to false, will scale only the box and not the text inside. The second parameter, scaleFrom, can be used to set a different initial per- centage. Here, the box will jump to 50 percent of its original size, and then animate back to 100 percent of its original size. Finally, by setting scaleFromCenter to true, we can ensure that the center of the box, not the top-left corner, remains fixed throughout the effect. Figure 10-11 shows the result. new Effect.Scale('box', 150, { scaleX: false, scaleY: true }); Figure 10-11. Effect.Scale can be told to animate only height or width. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS232 We can also restrict the scaling to one dimension: scaleX and scaleY both default to true, but setting one to false will prevent it from growing along that axis. (Setting both to false would be plainly silly.) Effect.Highlight Effect.Highlight simplifies a common use case for effects: the pulse-like animation of an element’s background color, otherwise known as the “yellow fade technique.” Popularized by 37signals’s web apps, the effect is an elegant, subtle way to call atten- tion to a region of the page that has changed—for instance, as the result of an Ajax call. Figure 10-12 shows the technique. new Effect.Highlight('box'); Figure 10-12. Effect.Highlight “pulses” a background color on an element. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 233 As you might expect, the default highlight color is a light shade of yellow, but the parameters startcolor and endcolor let us set the colors for the first and last frames of the effect, respectively; and restorecolor lets us set the color that the element will become after the effect is complete (see Figure 10-13): new Effect.Highlight('box', { startcolor: "#ffffff", endcolor: "#000000", restorecolor: "#999999" }); Figure 10-13. Effect.Highlight with custom colors CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS234 . SCRIPT .ACULO. US EFFECTS 233 As you might expect, the default highlight color is a light shade of yellow, but the parameters startcolor and endcolor let us set the colors for the first and last. INTRODUCTION TO SCRIPT .ACULO. US EFFECTS 231 First, we have scaleContent, which, when set to false, will scale only the box and not the text inside. The second parameter, scaleFrom, can be used to set a. position. CHAPTER 10 ■ INTRODUCTION TO SCRIPT .ACULO. US EFFECTS 229 Effect.Scale Effect.Scale handles, well, scaling—changing the size of an element (and, optionally, the size of its contents) by