Operation Manual

Adding Spry effects
To the top
To the top
To the top
Spry effects overview
Apply an Appear/Fade effect
Apply a Blind effect
Apply a Grow/Shrink effect
Apply a Highlight effect
Apply a Shake effect
Apply a Slide effect
Apply a Squish effect
Add an additional effect
Delete an effect
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 element with an effect, only that element 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 Simulates a window blind that goes up or down to hide or reveal the element.
Slide 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.
Apply an Appear/Fade effect
Note: You can use this effect with any HTML elements except applet, body, iframe, object, tr, tbody, or th.
1. (Optional) Select the content or layout element you want to apply the effect to.
2. In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Appear/Fade from the menu.
3. Select the element’s ID from the target element menu. If you already selected an element, choose <Current Selection>.
4. In the Effect Duration box, define the time it takes for the effect to occur, in milliseconds.
5. Select the effect you want to apply: Fade or Appear.
6. In the Fade From box, define the percentage of opacity you want the effect to have when it appears.
7. In the Fade To box, define the percentage of opacity you want to fade to.
8. Select Toggle Effect if you want the effect to be reversible, going from fade to appear and back again with successive clicks.
Apply a Blind effect
Note: You can only use this effect with these HTML elements: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir,
menu, or pre.
1. (Optional) Select the content or layout element you want to apply the effect to.
161