Adobe

Adding Spry effects


 

    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.
    2. In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Blind 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: Blind Up or Blind Down.
    6. In the Blind Up From/Blind Down From box, define the blind-scrolling starting point as a percentage or as a pixel number. These values are calculated from the top of the element.
    7. In the Blind Up To/Blind Down To field, define the blind-scrolling end point as a percentage or as a pixel number. These values are calculated from the top of the element.
    8. Select Toggle Effect if you want the effect to be reversible, scrolling up and down with successive clicks.

    Apply a Grow/Shrink effect

    Note: You can use this effect with these HTML elements: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu, or pre.
    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 > Grow/Shrink from the popup menu.
    3. Select the element’s ID from the target element pop-up menu. If you have already selected an element, choose <Current Selection>.
    4. In the Effect Duration field, define the time it takes for the effect to occur, in milliseconds.
    5. Select the effect you want to apply: Grow or Shrink.
    6. In the Grow/Shrink From box, define the element’s size when the effect starts. This is a percentage of the size or a pixel value.
    7. In the Grow/Shrink To box, define the element’s size when the effect ends. This is a percentage of the size or a pixel value.
    8. If you choose pixels for either the Grow/Shrink From or To boxes, the wide/high field becomes visible. Depending on the option you choose, the element will grow or shrink proportionately.
    9. Select whether you want the element to grow or shrink to the upper-left corner of the page or into the page’s center.
    10. Select Toggle Effect if you want the effect to be reversible, growing and shrinking with successive clicks.

    Apply a Highlight effect

    Note: You can use this effect with any HTML elements except applet, body, frame, frameset, or noframes.
    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 > Highlight 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 how long you want the effect to last, in milliseconds.
    5. Select the color you want the highlight to start with.
    6. Select the color you want the highlight to end with. This color lasts only as long as the duration you define in Effect Duration.
    7. Select the color for the element after the highlight has finished.
    8. Select Toggle Effect if you want the effect to be reversible, cycling through the highlight colors with successive clicks.

    Apply a Shake effect

    Note: You can use this effect with these HTML elements: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre, or table.
    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 > Shake from the menu.
    3. Select the element’s ID from the target element menu. If you have already selected an element, choose <Current Selection>.

    Apply a Slide effect

    For the Slide effect to work properly the target element must be wrapped in a container tag that has a unique ID. The container tag with which you wrap the target element must be a blockquote, dd, form, div, or center tag.

    The target element tag must be one of the following: blockquote, dd,div, form, center, table, span, input, textarea, select, or image.

    1. (Optional) Select the container tag of the content you want to apply the effect to.
    2. In the Behaviors panel (Window > Behaviors), click the Plus (+) button and select Effects > Slide from the menu.
    3. Select the container tag’s ID from the target element menu. If the container is already selected, choose <Current Selection>.
    4. In the Effect Duration field, define the time it takes for the effect to occur, in milliseconds.
    5. Select the effect you want to apply: Slide Up or Slide Down.
    6. In the Slide Up From box, define the sliding starting point as a percentage or as a pixel number.
    7. In the Slide Up To box, define the sliding end point as a percentage or as a positive pixel number.
    8. Select Toggle Effect if you want the effect to be reversible, sliding up and down with successive clicks.

    Apply a Squish effect

    Note: You can only use this effect with these HTML elements: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, or pre.
    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 > Squish from the menu.
    3. Select the element’s ID from the target element menu. If you have already selected an element, choose <Current Selection>.

    Add an additional effect

    You can associate multiple effect behaviors with the same element to produce interesting results.

    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 an effect from the Effects menu.
    3. Select the element’s ID from the target element menu. If you have already selected an element, choose <Current Selection>.

    Delete an effect

    You can remove one or more effect behaviors from an element.

    1. (Optional) Select the content or layout element you want to apply the effect to.
    2. In the Behaviors panel (Window > Behaviors), click the effect you want to delete from the list of behaviors.
    3. Do one of the following:

      • Click the Remove Event button in the subpanel title bar (-).

      • Right-click (Windows) or Control-click (Macintosh) the behavior, and select Delete Behavior.

    Legal Notices   |   Online Privacy Policy