Spry Effects are visual enhancements that you can apply to almost any element on an HTML page. For example, an effect might highlight information, create animated transitions, or visually alter a page element for a certain period of time. Effects are a simple but elegant way of enhancing the look and feel of your website.
Note: Spry 1.5 brings many new features over the previous Spry Effects 1.4. These updates forced us to make some changes in the core code and the API. This may will cause some of the pages designed with a previous version of Spry Effects to not run correctly after updating to Spry 1.5. If you want to updated to Spry Effects 1.5, read the Spry Effects migration documentation and follow the steps described there to fix the compatibility problems.
Effects refer to JavaScript methods and functions that run in the browser. Effects can be used to grow images in a gallery, or to move an element from one position to another.
For example, suppose there is the following content on the page:
<div id="content"> <img src="logo.jpg" width="150" height="350" alt="My Company"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </div>
This content can be initially hidden when page loads while waiting for the images and other resources. In this situation you use CSS to hide this area:
<style type="text/css">
#content{
visibility: hidden;
}
</style>
When the page finishes loading, you can setup the animation to display the content with a transition.
First, define a JavaScript Spry Effect animator below the main content area. For this example we will use a Fade in effect to make a gradual transition:
<script type="text/javascript">
var showContent = new Spry.Effect.Fade("content", {from: "0%", to: "100%"});
</script>
In the above script, "content" is the ID of the element that will be faded in. 'From' and 'to' refer to the opacity of the element. 0% is invisible and 100% is fully visible.
To start the effect, a function is used. 'showContent' is the variable name used in the above code sample. The start() function will begin the effect.
<body onload="showContent.start();"> ...
Note: The examples in this document are for reading purposes only and not intended for execution. For working samples, see the demos and samples folder in the Spry folder on Adobe Labs.
Adobe designed Spry Effects to be easy to implement while letting the framework do the real work. No new tags or difficult syntaxes are required. The animated element will need to have an id attribute defined.
The Spry framework for AJAX includes these effects:
Each of the above effects are based on one or multiple of the following basic animators used together in a Cluster:
The Spry Effects library, 'SpryEffects.js' , contains all of the Spry effects code. The file has no other dependencies.
Before you add effects to a page, link the SpryEffects.js file in the head of the HTML document, as follows:
<script type="text/javascript" src="../includes/SpryEffects.js"></script>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
Both the JavaScript file and the HTML file that contains the effects must reside on your server for Spry effects to work.
Before you attach Spry effects to elements on your web pages, download and link the appropriate file.
The Highlight effect changes the background color of a target element.
You can attach the Highlight effect to any HTML element except applet, body, frame, frameset, or noframes.
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs differ, depending on where you store the SpryEffects.js file.
<div id="highlight1"> 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.</div>
<p><a onclick="highlight1.start(); return false;" href="#">Click here to highlight the below paragraph.</a></p>
<script type="text/javascript">
var highlight1 = new Spry.Effect.Highlight('highlight1', {duration: 1000, from:'#CCCCCC', to:'#FFCC33', restoreColor: '#FFCC33', toggle: true});
</script>
The first argument of the JavaScript method is always the target element's ID ('highlight1' in the preceding example).
The complete code looks as follows:
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="highlight1.start(); return false;" href="#">Click here to highlight the below paragraph.</a></p>
<div id="highlight1">
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.</div>
<script type="text/javascript">
var highlight1 = new Spry.Effect.Highlight('highlight1', {duration: 1000, from:'#CCCCCC', to:'#FFCC33', restoreColor: '#FFCC33', toggle: true});
</script>
</body>
The following table lists the available options for the Highlight effect.
| Option |
Description |
|---|---|
duration |
The duration of the effect in milliseconds. The default value is 1000. |
from |
Start color value in RGB color format (#RRGGBB or #RGB). This value sets the color of the first frame of the highlight. The default is the background color of the target element. |
to |
End color value in RGB color format (#RRGGBB or #RGB). This value sets the color of the last frame of the highlight. |
restoreColor |
Color value in RGB color format (#RRGGBB or #RGB) to be restored at the end of animation in forward direction. |
toggle |
Produces a toggle effect. The default value is false. If the value is set to true, the restoreColor option is ignored. |
transition |
Determines the type of transition. The default is 'Spry.sinusoidalTransition'. |
fps |
Determines the number of frames per second of the animation. The default is 60. |
setup |
Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}. |
finish |
Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}. |
Sample code:
var effect = new Spry.Effect.Highlight("targetID", {duration:1000, from:"#00ff00", to:"#0000ff"});
effect.start();
More samples of the Highlight effect can be found in the effects samples folder from the Spry package.
Most effects provide the optional parameter 'transition'. This parameter describes the transition of the effect while the effect is performing from start to stop. Values can be:
The Fade effect makes an element appear or fade away by modifing the element's opacity property.
You can attach the Fade effect to any HTML element except applet, body, iframe, object, tr, tbody, or th.
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
<div id="fade1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy .</div>
<p><a onclick="fadeElement.start(); return false;" href="#">Click here to make the paragraph fade out from 100% to 20%.</a></p>
<script type="text/javascript">
var fadeElement = new Spry.Effect.Fade("fade1", {duration:1000, from:100, to:20, toggle:true});
</script>
The first argument of the JavaScript method is always the target element's ID ('fade1' in the preceding example).
The complete code looks as follows:
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="fadeElement.start(); return false;" href="#">Click here to make the paragraph fade out from 100% to 20%.</a></p>
<div id="fade1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</div>
<script type="text/javascript">
var fadeElement = new Spry.Effect.Fade("fade1", {duration:1000, from:100, to:20, toggle:true});
</script>
</body>
The following table lists available options for the Fade effect.
Option |
Description |
|---|---|
duration |
The duration of the effect in milliseconds. The default value is 1000. |
from |
Start opacity value in % ( "100%" ) or integer value. The default value is 0. |
to |
End opacity value in in % ( "100%" ) or integer value. The default value is 100. |
toggle |
Produces a toggle effect. The default value is false. |
transition |
Determines the type of transition. The default is 'Spry.fifthTransition'. |
fps |
Determines the number of frames per second of the animation. The default is 60. |
setup |
Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}. |
finish |
Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}. |
Sample code:
var effect = new Spry.Effect.Fade('targetID', {duration: 1000, from: 0, to: 100, toggle: true});
effect.start();
More samples of the Fade effect can be found in the effects samples folder.
The Blind up/Blind down effect simulates a window blind that moves up or down to hide or reveal the element. This effect is similar to the Slide effect, but the content stays in place.
You can only attach this effect to the following HTML elements: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu, or pre.
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
<div id="blindup1">
<h4>HEADER</h4>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<p><a onclick="blind_effect.start(); return false;" href="#">Click here to blind up from 100% to 0%</a></p>
<script type="text/javascript">
var blind_effect = new Spry.Effect.Blind("blindup1", {duration: 1000, from: "100%", to: "0%", toggle: true});
</script>
The first argument of the JavaScript method is always the target element's ID ('blindup1' in the preceding example).
The complete code looks as follows:
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</style>
</head>
<body>
<p><a onclick="blind_effect.start(); return false;" href="#">Click here to blind up from 100% to 0%</a></p>
<div id="blindup1">
<h4>HEADER</h4>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
</div>
<script type="text/javascript">
var blind_effect = new Spry.Effect.Blind("blindup1", {duration: 1000, from: "100%", to: "0%", toggle: true});
</script>
</body>
The following table lists available options for the Blind effect.
| Option |
Description |
|---|---|
duration |
The duration of the effect in milliseconds. The default value is 1000. |
from |
Start size in %, integers or pixels. The default value is 100%. |
to |
End size in %, integers or pixels. The default value is 0%. |
useCSSBox |
The border, margin and padding should be modified proportionally with the element inner content box. Default value is false. |
toggle |
Produces a toggle effect. The default value is false. |
transition |
Determines the type of transition. The default is 'Spry.circleTransition'. |
fps |
Determines the number of frames per second of the animation. The default is 60. |
setup |
Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}. |
finish |
Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}. |
Sample code:
var effect = new Spry.Effect.Blind('targetID',{duration: 1000, from: "100%", to: "0%"});
effect.start();
More samples of Blind effect can be found in the effects samples folder from the Spry package.
The Slide effect moves the target element up or down (or left to right). This effect is similar to the Blind effect but the contents move up and down (or left to right) instead of staying in the same place.
You can only attach this effect to the following HTML elements: blockquote, dd, div, form, center, table, span, input, textarea, select, or image. The Slide effect require the content of the animated element to be wrapped into a single block element.
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
<div id="slide1">
<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</div>
</div>
<p><a onclick="slide_effect.start(); return false;" href="#">Click here to slide the paragraph up from 100% to 20%</a></p>
<script type="text/javascript">
var slide_effect = new Spry.Effect.Slide("slide1", {duration:1000, from:'100%', to:'20%',toggle:true});
</script>
The first argument of the JavaScript method is always the target element's ID ('slide1' in the preceding example).
The complete code looks as follows:
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="slide_effect.start(); return false;" href="#">Click here to slide the paragraph up from 100% to 20%</a></p>
<div id="slide1">
<div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.</div>
</div>
<script type="text/javascript">
var slide_effect = new Spry.Effect.Slide("slide1", {duration:1000, from:'100%', to:'20%',toggle:true});
</script>
</body>
The following table lists available options for the Slide effect.
| Option |
Description |
|---|---|
duration |
The duration of the effect in milliseconds. The default value is 1000. |
from |
Start size in %, interger or pixels. The default value is '100%'. |
to |
End size in % integer or pixels. The default value is '0%'. |
toggle |
Produces a toggle effect. The default value is false. |
transition |
Determines the type of transition. The default is 'Spry.sinusoidalTransition'. |
fps |
Determines the number of frames per second of the animation. The default is 60. |
horizontal |
If set to true, slides the content horizontally instead of vertically. The default value is false. |
setup |
Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}. |
finish |
Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}. |
Sample code:
var effect = new Spry.Effect.Slide("targetID", {duration: 1000, from: '100%', to: '0%'});
effect.start();
More samples of the Slide effect can be found in the effects samples folder from the Spry package.
The Grow effect increases or reduces the size of the element. The movement grows toward or away from the center of the element.
You can only attach this effect to the following HTML objects: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu, img or pre.
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
<div id="shrink1"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod .</p> </div>
<p><a onclick="grow_effect.start(); return false;" href="#">Click here to shrink the paragraph from 100% to 20%.</a></p>
<script type="text/javascript">
var grow_effect = new Spry.Effect.Grow("shrink1", {duration:1000, from:"100%", to:"20%", toggle: true});
</script>
The first argument of the JavaScript method is always the target element's ID ('shrink1' in the preceding example).
The complete code looks as follows:
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head> <body> <p><a onclick="grow_effect.start(); return false;" href="#">Click here to shrink the paragraph from 100% to 20%.</a></p>
<div id="shrink1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
</div>
<script type="text/javascript">
var grow_effect = new Spry.Effect.Grow("shrink1", {duration:1000, from:"100%", to:"20%", toggle: true});
</script> </body>
The following table lists available options for the Grow effect.
| Option |
Description |
|---|---|
duration |
The duration of the effect in milliseconds. The default value is 1000. |
from |
Start size in %, integer or pixels. The default value is 0%. |
to |
End size in %, integer or pixels. The default value is 100%. |
toggle |
Produces a toggle effect. The default value is false. |
growCenter |
Growing and shrinking position of the element. The default value is true (grow and shrink from center). If set to false, the element grows or shrinks from the top left corner. |
useCSSBox |
The border, margin and padding should be modified proportionally with the element inner content box. Default value is false. |
transition |
Determines the type of transition. The default is 'Spry.squareTransition'. |
fps |
Determines the number of frames per second of the animation. The default is 60. |
setup |
Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}. |
finish |
Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}. |
Sample code:
var effect = new Spry.Effect.Grow("targetID", {duration: 1000, from: "0%", to: "100%"});
effect.start();
More samples of the Grow effect can be found in the effects samples folder from the Spry package.
The Squish effect makes the target element disappear into the upper-left corner of the page. The Squish effect produces the same effect as the Grow effect when the Grow effect's growCenter option is set to false.
You can only attach this effect to the following HTML elements: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, or pre.
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
<div id="squish1"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</p></div>
<p><a onclick="squish_effect.start(); return false;" href="#">Click here to squish the paragraph.</a></p>
<script type="text/javascript">
var squish_effect = new Spry.Effect.Squish("squish1");
</script>
The first argument of the JavaScript method is always the target element's ID ('squish1' in the preceding example).
The complete code looks as follows:
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="squish_effect.start(); return false;" href="#">Click here to squish the paragraph.</a></p>
<div id="squish1"><p>Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliqt</p></div>
<script type="text/javascript">
var squish_effect = new Spry.Effect.Squish("squish1");
</script>
</body>
The following table lists optional available options:
| Option |
Description |
|---|---|
duration |
The duration of the effect in milliseconds. The default value is 1000. |
from |
Start size in %, integer or pixels. The default value is 0%. |
to |
End size in %, integer or pixels. The default value is 100%. |
toggle |
Produces a toggle effect. The default value is false. |
useCSSBox |
The border, margin and padding should be modified proportionally with the element inner content box. Default value is false. |
transition |
Determines the type of transition. The default is 'Spry.squareTransition'. |
fps |
Determines the number of frames per second of the animation. The default is 60. |
setup |
Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}. |
finish |
Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}. |
Sample code:
var effect = new Spry.Effect.Squish("targetID",{duration: 1000, from: "100%", to: "0%"});
effect.start();
More samples of the Squish effect can be found in the effects samples folder from the Spry package.
The Shake effect simulates rapidly shaking the target element 20 pixels from left to right.
You can only attach this effect to the following 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.
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
<div id="shake1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqit amet.</div>
<p><a onclick="shake_effect.start(); return false;" href="#">Shake it!</a></p>
<script type="text/javascript">
var shake_effect = new Spry.Effect.Shake('shake1');
</script>
The first argument of the JavaScript method is always the target element's ID ('shake1' in the preceding example).
The complete code looks as follows:
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="shake_effect.start(); return false;" href="#">Shake it!</a></p>
<div id="shake1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
<script type="text/javascript">
var shake_effect = new Spry.Effect.Shake('shake1');
</script>
</body>
The following table lists available options for the Shake effect.
| Option |
Description |
|---|---|
duration |
Fixed at 500 milliseconds in Spry 1.4. Only editable in Spry 1.5 and later. |
transition |
Determines the type of transition. The default is 'Spry.linearTransition'. |
fps |
Determines the number of frames per second of the animation. The default is 60. |
setup |
Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}. |
finish |
Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}. |
Sample code:
var effect Spry.Effect.Shake('targetID');
effect.start();
More samples of the Shake effect can be found in the effects samples folder from the Spry package.
The Spry Effects Cluster is the way of combining multiple effects to run together on a single element. Depending on the method the animators are added to a Cluster class, the effects can either run in parallel or in queue (an effect is started only when the previous effect ended).
When you define a cluster, you can combine simple Animators like Move, Size, Opacity or Color, or a previous predefined Cluster effect. Using this ability you can create a new cluster effect as a combination of the current defined effects above described. Two good examples can be found in the Spry Effects Demo. There are two new clustered effects defined inside this demo: Fade & Slide and Fade & Blind.
A Cluster can contain an unlimited number of effects to animate. There is no restriction the clustered effects on the same element in a page. You can animate two or more different elements using a cluster, either in parallel or one after the other.
All the predefined effects Fade, Grow, Highlight, Slide, Shake and Blind, listed above, are clustered effects of the basic Animators: Move, Size, Opacity or Color.
Extend the Spry Cluster JavaScript class
The Spry Effects includes a class called Spry.Effect.Cluster. Any new effect that extends this class will became a Cluster.
To link the SpryEffects.js file on your web page, add the following code to the head of your document:<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
Suppose you we want to create a new effect that will fade in or out in parallel with sliding an element.
Let's create our class to extend the Spry.Effect.Cluster. The constructor should receive two parameters: the element to animate and the animation options.
<script type="text/javascript">
FadeSlide = function(element, options)
{
Spry.Effect.Cluster.call(this, options);
};
FadeSlide.prototype = new Spry.Effect.Cluster();
FadeSlide.prototype.constructor = FadeSlide;
</script>
We will have to define first some default values for the options we would like to support which will define the Effect behavior when no options are used:
<script type="text/javascript">
FadeSlide = function(element, options)
{
Spry.Effect.Cluster.call(this, options);
var duration = 1000;
var from = 0;
var to = 100;
var transition = Spry.fifthTransition;
var toogle = false;
};
FadeSlide.prototype = new Spry.Effect.Cluster();
FadeSlide.prototype.constructor = FadeSlide;
</script>
These default options should be replaced with the values received as parameters.
<script type="text/javascript">
FadeSlide = function(element, options)
{
Spry.Effect.Cluster.call(this, options);
var duration = 1000;
var from = 0;
var to = 100;
var transition = Spry.fifthTransition;
var toggle = false;
if (options)
{
if (options.duration != null) duration = options.duration;
if (options.from != null) from = options.from;
if (options.to != null) to = options.to;
if (options.transition != null) transition = options.transition;
if (options.toggle != null) toggle = options.toggle;
}
};
FadeSlide.prototype = new Spry.Effect.Cluster();
FadeSlide.prototype.constructor = FadeSlide;
</script>
The next step will be to define the effects that will effectivelly run and animate our given element
<script type="text/javascript">
FadeSlide = function(element, options)
{
Spry.Effect.Cluster.call(this, options);
var duration = 1000;
var from = 0;
var to = 100;
var transition = Spry.fifthTransition;
if (options)
{
if (options.duration != null) duration = options.duration;
if (options.from != null) from = options.from;
if (options.to != null) to = options.to;
if (options.transition != null) transition = options.transition;
}
var fadeEffect = new Spry.Effect.Fade(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
var blindEffect = new Spry.Effect.Blind(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
};
FadeSlide.prototype = new Spry.Effect.Cluster();
FadeSlide.prototype.constructor = FadeSlide;
</script>
Note: In this situation, the options sent to the individual effect are the same. There are situation when the values for the defined effects need a more complex computation for each effect participating into the cluster.
After the effects are defined , as a last step, should be register to the cluster. The registration is done using one of the the two methods that are made available by the original Cluster class from Spry Effects: addParallelEffect and addNextEffect. Using the first method of registering the effects to the cluster will cause all the effects registered to run in parallel. Below is the complete code of the FadeSlide with the two animations registered in parallel:
<script type="text/javascript">
FadeSlide = function(element, options)
{
Spry.Effect.Cluster.call(this, options);
var duration = 1000;
var from = 0;
var to = 100;
var transition = Spry.fifthTransition;
if (options)
{
if (options.duration != null) duration = options.duration;
if (options.from != null) from = options.from;
if (options.to != null) to = options.to;
if (options.transition != null) transition = options.transition;
}
var fadeEffect = new Spry.Effect.Fade(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
var blindEffect = new Spry.Effect.Blind(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
this.addParallelEffect(fadeEffect);
this.addParallelEffect(blindEffect);
};
FadeSlide.prototype = new Spry.Effect.Cluster();
FadeSlide.prototype.constructor = FadeSlide;
</script>
The only thing that remains is to use the new effect you just created, same as any other effect.
<p><a onclick="myFadeSlide.start(); return false;" href="#">Click here to Fade and Blind the below paragraph.</a></p>
<div id="content">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliqit amet.</div>
<script type="text/javascript">
var myFadeSlide = new FadeSlide("content", {from: "100%", to: "0%", duration: 1500, toogle: true}
</script>
The mathematical algorithms inside the Spry Effects used to compute the path between a starting value and the end value are called 'transition' algorithms.
A transition function will have a different impact on each effect's smoothness and perception. An effect may look nice using a certain transition while using the same algorithm with another effect may have a different perception. For instance, a boucing transition is good for moving panels, but might not be right for changing colors.
When you want to move from a point of origin to an ending point, the simplest and shortest path is a linear transition. The transitions are time dependent functions. This means that a transition will always take the same amount of time. Therefore, a transition will go faster if it has to go farther, growing for instance.
The transition functions will return the current position of the value at any given time between the starting and the ending desired values.
All the effects in Spry framework are designed to receive as parameter the transition to use. There are 8 transitions function included in Spry that you can use depending on your need.
The actual transitions are hard to describe. The Spry 'samples' folder includes a transition sample so you can see how the tranistions work with the effects. The graph gives a visual representation of the transition.
The current transition mechanism allows you to define your own transition functions and use them with Effects. Depending on the mathematical algorithm used, you have control over the animation acceleration and deceleration periods from the animation.
In your page you'll have to define a new function that receive the following parameters: elapsed time (time), starting value (begin), the difference between the finish and the start values (change) and the total time duration of the effect (duration).
<script type="text/javascript">
function myTransition(time, begin, change, duration)
{ /* ... */}
</script>
The value the function returns should be the current value for the time elapsed from the moment the transition started.
The new transition function can be now used with any of the effects. You will have to pass as the value the name of your transition function.
Sample code:
myTransition = function(time, begin, change, duration){
if (time > duration) return (change+finish);
return begin + Math.sqrt(time/duration) * change;
}
var effect = new Spry.Effect.Fade("targetID", {duration: 1000, transition: myTransition, toggle: true, from: 100, to: 0});
effect.start();
The Color effect makes the transition of the target element background from a color to another. This effect is used by the Highlight Cluster effect for animation.
You can attach the Color effect to any HTML element except applet, body, frame, frameset, or noframes.
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
<div id="color1"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</p></div>
<p><a onclick="color_effect.start(); return false;" href="#">Click here to change the background color of the paragraph.</a></p>
<script type="text/javascript">
var color_effect = new Spry.Effect.Color("color1", "#FFCC33", "#CC5512", {duration: 1000});
</script>
The first argument of the JavaScript method is always the target element's ID ('color1' in the preceding example).
The second argument required is the start color of the background in RGB format.
The third argument is the ending color of the background in RGB format.
The complete code looks as follows:
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="color_effect.start(); return false;" href="#">Click here to change the background color of the paragraph.</a></p>
<div id="color1"><p>Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliqt</p></div>
<script type="text/javascript">
var color_effect = new Spry.Effect.Color("color1", "#FFCC33", "#CC5512", {duration: 1000});
</script>
</body>
The following table lists optional available options:
| Option |
Description |
|---|---|
duration |
The duration of the effect in milliseconds. The default value is 1000. |
toggle |
Produces a toggle effect. The default value is false. |
transition |
Determines the type of transition. The default is 'Spry.linearTransition'. |
fps |
Determines the number of frames per second of the animation. The default is 60. |
setup |
Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}. |
finish |
Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}. |
Sample code:
var effect = new Spry.Effect.Color("targetID", "#FFCC33", "#CC5512", {duration: 1000, transition: Spry.fifthTransition, toggle: true}););
effect.start();
The Move effect change the target element position within the page. The Move effect is used by many of the clustered effects: Grow, Slide, Shake, Squish.
You can only attach this effect to the following HTML elements: address, dd, div, dl, dt, form, img, ol, ul, applet, center, dir, menu, or pre.
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
<div id="move1"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</p></div>
<p><a onclick="move_effect.start(); return false;" href="#">Click here to move the paragraph.</a></p>
<script type="text/javascript">
var fromPos = new Spry.Effect.Utils.Position();
fromPos.x = 0;
fromPos.y = 0;
var toPos = new Spry.Effect.Utils.Position();
toPos.x = 300;
toPos.y = 0;
Spry.Effect.makePositioned(document.getElementById("move1"));
var move_effect = new Spry.Effect.Move("move1", fromPos, toPos, {duration: 1000, toggle: true});
</script>
The first argument of the JavaScript method is the target element's ID ('move1' in the preceding example).
The second argument the position that represent the start coordinates of the element. The default units of mesure are pixels. You can change this value by using the 'units' property of the position object: fromRect.units = 'em';
The third argument the position that represent the ending coordinates of the element. The default units of mesure are pixels. You can change this value by using the 'units' property of the position object: fromRect.units = 'em';
Note: the units for both starting and ending positions should be the same otherwise the effect will not accept them as valid parameters.
You can observe in the code above the following line:
Spry.Effect.makePositioned(document.getElementById("move1"));
The animated element should have the position CSS property set to absolute or relative. The code line above is making sure the element position property is correct for the Move animation to work.
The complete code looks as follows:
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="move_effect.start(); return false;" href="#">Click here to move the paragraph.</a></p>
<div id="move1"><p>Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliqt</p></div>
<script type="text/javascript">
var fromPos = new Spry.Effect.Utils.Position();
fromPos.x = 0;
fromPos.y = 0;
var toPos = new Spry.Effect.Utils.Position();
toPos.x = 300;
toPos.y = 0;
Spry.Effect.makePositioned(document.getElementById("move1"));
var move_effect = new Spry.Effect.Move("move1", fromPos, toPos, {duration: 1000, toggle: true});
</script>
</body>
The following table lists optional available options:
| Option |
Description |
|---|---|
duration |
The duration of the effect in milliseconds. The default value is 1000. |
toggle |
Produces a toggle effect. The default value is false. |
transition |
Determines the type of transition. The default is 'Spry.linearTransition'. |
fps |
Determines the number of frames per second of the animation. The default is 60. |
setup |
Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}. |
finish |
Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}. |
Sample code:
var fromRect = new Spry.Effect.Utils.Rectangle;
fromRect.width = 100;
fromRect.height = 100;
var toRect = new Spry.Effect.Utils.Rectangle;
toRect.width = 300;
toRect.height = 300;
Spry.Effect.makeClipping(document.getElementById("targetID"));
var size_effect = new Spry.Effect.Size("targetID", fromRect, toRect, {duration: 1000, toggle: true, scaleContent: true, transition: Spry.fifthTransition});
The Opacity effect makes the target element disappear or appear by changing the CSS opacity property. The Opacity effect is used by the Fade Cluster effect.
You can attach the Fade effect to any HTML element except applet, body, iframe, object, tr, tbody, or th.
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
<div id="opacity1"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</p></div>
<p><a onclick="opacity_effect.start(); return false;" href="#">Click here to hide the paragraph.</a></p>
<script type="text/javascript">
var opacity_effect = new Spry.Effect.Opacity("opacity1", 1, 0.1, {duration: 1000});
</script>
The first argument of the JavaScript method is always the target element's ID ('opacity1' in the preceding example).
The second and the third arguments are the start and end opacity values. These values should be float numbers between 0 and 1 where 0 make the element to be invisible and 1 is the value for the element opac.
The complete code looks as follows:
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="opacity_effect.start(); return false;" href="#">Click here to hide the paragraph.</a></p>
<div id="opacity1"><p>Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliqt</p></div>
<script type="text/javascript">
var opacity_effect = new Spry.Effect.Opacity("opacity1", 1, 0.1, {duration: 1000});
</script>
</body>
The following table lists optional available options:
| Option |
Description |
|---|---|
duration |
The duration of the effect in milliseconds. The default value is 1000. |
toggle |
Produces a toggle effect. The default value is false. |
transition |
Determines the type of transition. The default is 'Spry.linearTransition'. |
fps |
Determines the number of frames per second of the animation. The default is 60. |
setup |
Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}. |
finish |
Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}. |
Sample code:
var effect = new Spry.Effect.Opacity("targetID", 1, 0.5, {duration: 1000, toggle: true});
effect.start();
The Size effect change the target element width and height. The Size effect is used by many of the clustered effects: Grow, Blind, Slide
You can only attach this effect to the following HTML elements: address, dd, div, dl, dt, form, img, ol, ul, applet, center, dir, menu, or pre.
<head> . . . <script src="../includes/SpryEffects.js" type="text/javascript"></script> </head>Note: The exact file path differs, depending on where you store the SpryEffects.js file.
<div id="size1"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqt</p></div>
<p><a onclick="size_effect.start(); return false;" href="#">Click here to resize the paragraph.</a></p>
<script type="text/javascript">
var fromRect = new Spry.Effect.Utils.Rectangle;
fromRect.width = 100;
fromRect.height = 300;
var toRect = new Spry.Effect.Utils.Rectangle;
toRect.width = 300;
toRect.height = 900;
Spry.Effect.makeClipping(document.getElementById("size1"));
var size_effect = new Spry.Effect.Size("size1", fromRect, toRect, {duration: 1000, toggle: true});
</script>
The first argument of the JavaScript method is the target element's ID ('size1' in the preceding example).
The second argument is a rectangle that represent the start dimensions of the element. The default units of mesure are pixels. You can change this value by using the 'units' property of the rectangle: fromRect.units = 'em';
The third argument is a rectangle that represent the ending dimensions of the element. The default units of mesure are pixels. You can change this value by using the 'units' property of the rectangle: fromRect.units = 'em';
Note: the units for both starting and ending rectangles should be the same otherwise the effect will not accept them as valid parameters.
You can observe in the code above the following line:
Spry.Effect.makeClipping(document.getElementById("size1"));
The animated element should have the CSS overflow property set to hidden or scroll. When shrinking the element dimentions, we do not want the content to be displayed outside the inner content area. The code line above is making sure the element overflow property is correct for the Size animation to work.
The complete code looks as follows:
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="size_effect.start(); return false;" href="#">Click here to resize the paragraph.</a></p>
<div id="size1"><p>Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliqt</p></div>
<script type="text/javascript">
var fromRect = new Spry.Effect.Utils.Rectangle;
fromRect.width = 100;
fromRect.height = 300;
var toRect = new Spry.Effect.Utils.Rectangle;
toRect.width = 300;
toRect.height = 900;
Spry.Effect.makeClipping(document.getElementById("size1"));
var size_effect = new Spry.Effect.Size("size1", fromRect, toRect, {duration: 1000, toggle: true});
</script>
</body>
The following table lists optional available options:
| Option |
Description |
|---|---|
duration |
The duration of the effect in milliseconds. The default value is 1000. |
scaleContent |
The content of the element is scaled proportionally with the dimensions animation. The default value is false. |
toggle |
Produces a toggle effect. The default value is false. |
useCSSBox |
The border, margin and padding should be modified proportionally with the element inner content box. Default value is false. |
transition |
Determines the type of transition. The default is 'Spry.linearTransition'. |
fps |
Determines the number of frames per second of the animation. The default is 60. |
setup |
Lets you define a function that is called before the effect begins, e.g., setup:function (element,effect){/* ... */}. |
finish |
Lets you define a function that is called after the effect finishes, e.g., finish:function (element,effect){/* ... */}. |
Sample code:
var fromRect = new Spry.Effect.Utils.Rectangle;
fromRect.width = 100;
fromRect.height = 100;
var toRect = new Spry.Effect.Utils.Rectangle;
toRect.width = 300;
toRect.height = 300;
Spry.Effect.makeClipping(document.getElementById("targetID"));
var size_effect = new Spry.Effect.Size("targetID", fromRect, toRect, {duration: 1000, toggle: true, scaleContent: true, transition: Spry.fifthTransition});
The Effects supports an observer mechanism that allows an object or callback function to receive event notifications. Using this system you can implement your own custom functions or objects to register to any effect. Everytime the effect will pass through some predefined execution points the observers will executed.
Using this mechanism you can synchronize other actions with the running effect.
Notification |
Description |
|---|---|
onPreEffect |
The effect is about to start the element animation. |
onStep |
The animation executed a new animation step. The code you execute here should not be time consuming otherwise you'll affect the animation smoothness that wait at each step for your code to finish. |
onPostEffect |
The animation finished all the steps and will stop. |
onCancel |
The effect was canceled and the animation will stop. |
onToggle |
The animation is about to start in the backward direction. This notification will be fired only if the toggle option is on. |
Note:The onPostEffect and onCancel observers will be notified just before effect to end execution. If in these functions you'll like to restart the effect, for example, to run in the backward direction, or you need to change some of the options in the effect, you should use the setTimeout() JS function to postpone your action just after the effect finish. Not using this system is possible the effect to stop your effect run command or to restore the old properties.
To receive notifications, an object must define a method for each notification it is interested in receiving, and then register itself as an observer on the Effect. The registration to the effect should be done after the effect is instantiated but before the effect to be started. For example, an object interested in onPostEffect notifications must define an onPostEffect() method. Calling the addObserver() method of the instantiated effect you register then the new created observer to the effect.
A single observer object can contain multiple methods for each action to be notified. However, if the observer don't need to be notified on certain events than it can ignore them by not implementing their corresponding functions.
var effect = new Spry.Effect.Blind("myElement", {from: '100%', to: '0%', toggle: true});
var myObserver = new Object();
myObserver.onPreEffect = function(eff)
{
alert('onPreEffect called! The effect is running in '+(eff.direction == Spry.forwards?'forward':'backward')+' direction');
};
myObserver.onStep = function(eff)
{
alert('onStep called!');
};
effect.addObserver(myObserver);
effect.start();
The first argument for each notification method is the object that is sending the notification. For the effects observers, this is always the effect object.
To stop an object from receiving notifications, the object must be removed from the list of observers with a call to removeObserver().
var effect = new Spry.Effect.Blind("myElement", {from: '100%', to: '0%', toggle: true});
...
effect.removeObserver(myObserver);
More samples of the Observers can be found in the effects samples folder from the Spry package.
Functions can also be registered as observers. The main difference between object and function observers is that an object is only notified for the notification methods it defines, whereas a function observer is called for every type of event notification.
var effect = new Spry.Effect.Blind("myElement", {from: '100%', to: '0%', toggle: true});
function myObserverFunc(notificationType, eff)
{
if (notificationType == 'onPreEffect'){
alert('onPreEffect called !');
}else if (notificationType == 'onStep'){
alert('onStep called !');
}
};
A function observer is registered with the same call to addObserver.
When the function is called, the first argument to be passed into it is the notification type. This is a string that is the name of the notification. The second argument is the notifier, which in this case is the effect.
To stop a function from receiving notifications, the function must be removed from the list of observers with a call to removeObserver().
var effect = new Spry.Effect.Blind("myElement", {from: '100%', to: '0%', toggle: true});
...
effect.removeObserver(myObserverFunc);
More samples of the Observers can be found in the effects samples folder from the Spry package.
Copyright © 2006. Adobe Systems Incorporated.
All rights reserved.