DM 171: Week Fourteen - May 17

Spry Effects are a group of effects you may add to your page. They include Highlight, Appear/Fade, Grow/Shrink, Squish, Shake, BlindUp/BlindDown, and SlideUp/Down. The effects are combined with other aspects of the Spry framework to create dynamic transitions for your data.

The Spry documentation is well written, we will only go over the basics here. In general:

• You will need to copy the appropriate JavaScript file for the effect you wish to create and add it to your site files.
  
  
• Link the page to the JavaScript file.
  
  
• For some more complicated effects, you will need to add to your files and link to specific style sheets, refer to the documentation.
  
  
• ID the element you wish to effect. The Spry Effects API documentation lists every effect and which elements they may be used with. For my example above, I needed to add a div tag around the heading tag to make the SlideUp/Down transition work.
  
  
• View the sample pages to see examples of how to implement the effect. Often, it is easier to understand the code from the simple example pages rather than the more complex ones; the more complex ones have much more scripting to them. The anchor tags used to trigger my examples above were copy/pasted from the example files with changes to the “arguments” to reflect the IDs I used and changes to the parameters that I desired. The example file source code will help with understanding of the JavaScript syntax.
  
  
• Play, test, and play some more. Try changing parameters and playing with the effects.