Dreamweaver

Spry effects overview

Spry effects are visual enhancements that you can apply to almost any element on an HTML page using JavaScript. Effects are often used to highlight information, create animated transitions, or alter a page element visually for a duration of time. You can apply effects to HTML elements without needing additional custom tags.

Note: To apply an effect to an element, it must be currently selected or it must have an ID. If, for example, you are applying highlighting to a div tag that is not currently selected, the div must have a valid ID value. If the element doesn’t already, you will need to add one to the HTML code.

Effects can alter an element’s opacity, scale, position, and styling properties such as background color. You can create interesting visual effects by combining two or more properties.

Because these effects are Spry-based, when a user clicks on an object with an effect, only the object is dynamically updated, without refreshing the entire HTML page.

Spry includes these effects:

Appear/Fade
Makes an element appear or fade away.

Highlight
Changes the background color of an element.

Blind Up/Down
Simulates a window blind that goes up or down to hide or reveal the element.

Slide Up/Down
Moves the element up or down.

Grow/Shrink
Increases or reduces the size of the element.

Shake
Simulates shaking the element from left to right.

Squish
Makes the element disappear into the upper-left corner of the page.

Important: When you use an effect, various lines of code are added to your file in the Code view. One line identifies the SpryEffects.js file, which is necessary to include the effects. Do not remove this line from your code or the effects will not work.

For a comprehensive overview of the Spry effects available in the Spry framework, visit www.adobe.com/go/learn_dw_spryeffects.