Spry Effects API

Overview : Highlight : Fade : Grow : Squish : Shake : Blind : Slide

Links

An detailed overview of the functions inside the SpryEffects.js and how to call them

Samples


Blind

The Blind Effect enables users simulating a window blind up/down, where the contents of the affected elements stay in place.

 View Example

 <a href="#" onclick="theSlide.start();" >
    Blind Up with toggle=true </a>
<div id="slideItUp1">
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</p>
</div>
<script> var theSlide = new Spry.Effect.Blind('slideItUp1', {duration: 1000, from: '100%', to: '0%', toggle: true}); </script>

Parameters for the Blind effect

duration The duration of the effect in milliseconds
from The start value of the effect as string value + % or px. e.g from:"10px"
to The end value of the effect as string value + % or px.
toggle If the effect should run in revers orde onc you select the trigger element again
setup function that is called before the effect begins e.g function setup (element,effect){}
finish function that is called after the effect e.g function finish (element,effect){ alert("finish function")}
transition Spry.linearTransition or Spry.sinusoidalTransition as object

Allowed elements

address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu, pre

Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

Fade

Makes an element appear/fade away

 View Example

 <a href="#" onclick="fadeIt.start();">Fade It</a>
   <div id="targetID">Fade me, please.</div>
   <script>
   var fadeIt = new Spry.Effect.Fade('targetID',{duration: 1000,from: 0, to: 100,toggle: true, setup:setupFunc,finish:finishFunc});
 function setupFunc(elmentObj , FadeObj)
   {
   alert('The ' + FadeObj.name +' effect now starts');
   }
  function finishFunc(elmentObj , FadeObj)
   {
   elmentObj.style.backgroundColor= "#ff0000"; // set the element background color to red
   }
   </script>

Parameter for the Appear Fade effect

duration The duration of the effect in milliseconds
from The start value of the effect as integer value from:10
to The end value of the effect as integer value
toggle If the effect should run in revers orde onc you select the trigger element again
setup function that is called before the effect begins e.g function setup (element,effect){}
finish function that is called after the effect e.g function finish (element,effect){}
transition Spry.linearTransition or Spry.sinusoidalTransition as object

Notes

Works safely with most HTML elements, except body, table rows, table bodies and table heads.
There is currently no common way to set the opacity of an element either use opacity:0.2 or filter:alpha(opacity=20)
for IE.
The opacity is also not supported by [Firefox 1.5, Microsoft IE for Macintosh 5.2, Microsoft Internet Explorer 6.0, Netscape Navigator 8.0, Opera 8.0, Safari 2.0]

Non supported Elements

applet, body, iframe, object, tr, tbody, th

Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

Grow

Shrinks or Grows the specified element.

 View Example

<a href="#" onclick="theGrow.start();" > Shrink from 100%  to 20%  with toggle=true</a>
<div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna</div> <script> var theGrow = new Spry.Effect.Grow('example1',{duration:700, from:'100%', to:'20%',toggle:true,transition:Spry.linearTransition}); </script>

Parameter for the Grow/Shrink effect

duration The duration of the effect in milliseconds
from The start value of the effect as string value + % or px. e.g from:"10px"
to The end value of the effect as string value + % or px.
referHeight reference direction for the from/to parameters, if set in pixel (true: height, false: width), default: false
growCenter growing position of the element (true: grow from center, false: grow from top left corner), default: true
toggle If the effect should run in revers order onc you select the trigger element again
setup function that is called before the effect begins e.g function setup (element,effect){}
finish function that is called after the effect e.g function finish (element,effect){}
transition Spry.linearTransition or Spry.sinusoidalTransition as a object

Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect

top

Highlight

This effect Flashes a color as the background of an element.

 View Example

<a href="#" onclick="thehighlight.start();" > Highlight Box  </a></p>
<div id="highlight1">Lorem ipsum dolor sit amet,consetetur sadipscing elitr</div> <script> var thehighlight = new Spry.Effect.Highlight('highlight1',{duration: 2000,from:'#CCCCCC',to:'#FFCC33',restoreColor:'#FFCC33',toggle:true}); </script>

Parameters for the Highlight effect

duration The duration of the effect in milliseconds
from startcolor value, sets the color of first frame of the highlight
toggle true or false, if true the restoreColor get ignored
to endcolor value, sets the color of the last frame of the highlight.
restoreColor Sets the background color of the element after the highlight has finished.
setup function that is called before the effect begins e.g function setup (element,effect){}
finish function that is called after the effect e.g function finish (element,effect){}
transition Spry.linearTransition or Spry.sinusoidalTransition as a object

Notes

If you use the toggle option within the highlight effect , the restoreColor get ignored.

Elements not allowed

applet, body, frame, frameset, noframes

Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect

top

Shake

The Shake effect moves the specified element left and right in a rapid manner.

 View Example

<a href="#" onclick="theShake.start();"> Shake it </a></p>
<div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqit amet</div> <script> var theShake = new Spry.Effect.Shake('example1'); </script>

Parameters for the Shake effect

id id of the element to be shaken.
duration the length of the shaking. Default is 500 millliseconds.
setup function that is called before the effect begins e.g function setup (element,effect){}
finish function that is called after the effect e.g function finish (element,effect){}

Notes

Shake only works left and right. It does not work up and down. The duration is fixed to 500ms.

Allowed 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, table

Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

Slide

Simulates a window blind, where the contents of the specified element scrolls up or down or from left to right.

 View Example

<a href="#" onclick="theSlide.start();" > Slide Up with toggle=true</a>
<div id="example1">
<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</div>
</div> <script> var theSlide = new Spry.Effect.Slide('example1',{duration:1000,from:'100%', to:'20%',toggle:true}); </script>

Parameter for the Slide effect

duration The duration of the effect in milliseconds
from The start value of the effect as string value + % or px. e.g from:"10px"
to The end value of the effect as string value + % or px.
horizontal The slide direction of the effect (true: horizontal or false: vertical (default))
toggle If the effect should run in revers orde onc you select the trigger element again
setup function that is called before the effect begins e.g function setup (element,effect){}
finish function that is called after the effect e.g function finish (element,effect){}
transition Spry.linearTransition or Spry.sinusoidalTransition as a object

Notes

Slide effect always requires a single <div> around the content that should slide. The widget is attached to the outer container.

Allowed elements

blockquote, dd, form, div, center

Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

Squish

The Squish effect collapses the specified element into the upper left corner of itself until it disappears.

 View Example

<a href="#" onclick="theSquish.start();" > Squish Example 2 </a>
<div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</div> <script> var theSquish = new Spry.Effect.Squish('example1'); </script>

Parameters for the Squish effect

duration The duration of the effect in milliseconds
toggle If the effect should run in revers order once you select the trigger element again
setup function that is called before the effect begins e.g function setup (element,effect){}
finish function that is called after the effect e.g function finish (element,effect){}

Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

Pulsate

The Pulsate effect causes the element to quickly fade in and out during the duration.

 View Example

<a href="#" onclick="thePulse.start();" >Pulsate Example</a>
<div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</div> <script> var thePulse = new Spry.Effect.Pulsate('example1'); </script>

Parameters for the Pulse effect

duration The duration of the effect in milliseconds
from The start value of the effect as string value + % or px. e.g from:"10px"
to The end value of the effect as string value + % or px.
transition Spry.linearTransition or Spry.sinusoidalTransition as a object

Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

Puff

The Puff effect causes the element to move towards the top left corner of the screen and fade out at the same time..

 View Example

<a href="#" onclick="thePuff.start();" >Puff Example</a>
<div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</div> <script> var thePuff = new Spry.Effect.Puff('example1'); </script>

Parameters for the Pulse effect

Values for this effect are hard coded in SpryEffects.js

Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

Fold

The Fold effect causes the element to disappear by blinding up and then to the left.

 View Example

<a href="#" onclick="theFold.start();" >Fold Example</a>
<div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</div> <script> var theFold = new Spry.Effect.Fold('example1',{toggle:true}); </script>

Parameters for the Pulse effect

Values for this effect are hard coded in SpryEffects.js

Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top

Dropout

The Fold effect causes the element to move down the page as it fades out.

 View Example

<a href="#" onclick="theDropOut.start();" >Dropout Example</a>
<div id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</div> <script> var theDropOut = new Spry.Effect.DropOut('example1',{toggle:true}); </script>

Parameters for the Pulse effect

Values for this effect are hard coded in SpryEffects.js

Allowed elements

address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, pre

Functions

varname.start(); - Starts the effect.

varname.stop(); - Stops the effect.

top


Copyright © 2006. Adobe Systems Incorporated. All rights reserved.