Spry Effects API

Overview : Highlight : Appear/Fade : Grow/Shrink : Squish : Shake : BlindUp/BlindDown : SlideUp/Down

Currently, the SpryEffects.js provides the folllowing 7 effects:

Links

The Philosophy behind Spry Effects

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

Examples


Highlight

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

Example

Beispiel-Seite View Example

script  src="../../../js/SpryEffects.js" type="text/javascript" > </script>
</head>
<body> <a onclick="Spry.Effect.Highlight('highlight1',{duration: 2000, from:'#CCCCCC', to:'#FFCC33',restoreColor: '#FFCC33',toggle:true})" > Highlight Box </a></p>
<div class="demoDiv" id="highlight1"><span class="sampleText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</span> </div>
</body>

Source Listing - The first argument to the method is the element/or the element id.

Parameters for the Highlight effect

Optional Constructor Options
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.sinusoidalTransition 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

top


Appear/Fade

Makes an element appear/fade away

Example

Beispiel-Seite View Example

<script  src="../../../js/SpryEffects.js" type="text/javascript" > </script>
</head>
<body> <a onclick="Spry.Effect.AppearFade('1', {duration:1000,from:100,to:20,toggle:true})" > Fade from 100% to 20% with toggle=true </a>(Fade)</p>
<div class="demoDiv" style="height:25px" id="1">
<p class="sampleText"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div>
<p> <a onclick="Spry.Effect.AppearFade('2', {duration:1000,from:20,to:100,toggle:true}) >Fade from 20% to 100% with toggle=true </a></p> <div class="demoDiv" style="background-color:#CCCCCC; height:25px; opacity:0.2; filter:alpha(opacity=20)" id="2">
<p class="sampleText"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</p>
</div>
</body>

Source Listing - The first argument to the method is the element/or the element id.

Parameter for the Appear Fade effect

Optional Constructor Options
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.sinusoidalTransition 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

top


Grow / Shrink

Shrinks or Grows the specified element.

Example

Beispiel-Seite View Example

<script  src="../../../js/SpryEffects.js" type="text/javascript" > </script>
</head>
<body>
<a onclick="Spry.Effect.GrowShrink('example1',{duration:700, from:'100%', to:'20%',toggle: true})" > 
Shrink from 100%  to 20%  with toggle=true
</a>
<div class="demoDiv" id="example1"><span class="sampleText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet</span></div> </body>

Source Listing - The first argument to the method is the element/or the element id.

Parameter for the Grow/Shrink effect

Optional Constructor Options
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.sinusoidalTransition or Spry.sinusoidalTransition as a object

Allowed elements

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

top


Squish

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

Example

Beispiel-Seite View Example

<script  src="../../../js/SpryEffects.js" type="text/javascript" > </script></head>
<body><a onclick="Spry.Effect.Squish('example1')" > Squish Example 2 </a></p>
<div class="demoDiv" id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliqt</div> </body>

Source Listing - The first argument to the method is the element/or the element id.

Parameters for the Squish effect

Optional Constructor Options
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

top


Shake

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

Example

Beispiel-Seite View Example

<script  src="../../../js/SpryEffects.js" type="text/javascript" > </script></head>
<body>
<p>
<a onclick="Spry.Effect.Shake(('example1')"  > Shake it </a></p>
<div class="demoDiv" id="example1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliqit amet</div> </body>

Source Listing - Example of creating an BlindUp Effect in JavaScript. The first argument to the method is the element/or the element id.

Parameters for the Shake effect

Optional Constructor Options
id id of the element to be shaken.
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

top


Blind Up / Blind Down

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

Example

Beispiel-Seite View Example

<script  src="../js/SpryEffects.js" type="text/javascript" > </script>
</head>
<body>
 <a onclick="Spry.Effect.Blind('slideItUp1', {duration: 1000, from:  '100%', to:  '0%', toggle: true});" >
    BlindUp from 100%  to 0%  with toggle=true 
 </a>
<div style="background-color:#CCCCCC; height:200px; width:300px; overflow:hidden" id="slideItUp1">
<h4>HEADER</h4>
<p class="sampleText"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</p>
</div>
<p></p>
<p></p>
<div style="background-color:#CCCCCC; height:40px; width:500px; overflow:hidden" id="slideDown2">
<h4><a onclick="Spry.Effect.Blind('slideDown2', {duration: 1000, from: '40px', to: '200px', toggle: true});" >BlindDown from 40px to 200px with toggle=true</a></h4>
<div class="sampleText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</div>
</div>
</body>

Source Listing - Example of creating an BlindUp Effect in JavaScript. The first argument to the method is the element/or the element id.

Parameters for the Blind effect

Optional Constructor Options
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

top


Slide

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

Example

Beispiel-Seite View Example

<script  src="../../../js/SpryEffects.js" type="text/javascript" > </script></script>
</head>
<body><p>
<a onclick="Spry.Effect.Slide('example1',{duration:1000,from:'100%', to:'20%',toggle:true})" > SlidUp from 100%  to 20%  with toggle=true</a></p>
<div class="demoDiv" id="example1">
<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
</div>
</div> </body

Source Listing - Example of creating an SlideUp Effect in JavaScript. The first argument to the method is the element/or the element id.

Parameter for the Slide effect

Optional Constructor Options
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.sinusoidalTransition or Spry.sinusoidalTransition as a object

Notes

Slide effect always requires a single <div> around the content that should slide !!

Allowed elements

blockquote, dd, form, div, center

top

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