The Visual effects module comes with six-core effects: Opacity, Scale, Morph, MoveBy, Highlight, and Parallel. Through the combination of these core effects there are over 16 additional effects eg: effect, Appear, effect, Toggle, etc.
Core Effects:
- Effect.Opacity: can be used for changing an element’s opacity (transparency).
- Effect.Scale: can be used for gradually scaling an element up or down, either vertically or horizontally.
- Effect.Morph: can be used for changing the CSS properties of an element.
- Effect.move: can be used for moving an element by modifying its position attributes.
- Effect.Highlight: can be used for flashing a color as the background of an element.
- Effect.Parallel: can be used for combining more than one core effect into a parallel effect.
Additional Effects:
- Effect.Appear: It makes the selected element appear.
- Effect.Fade: It makes the element fade away an eventual set its display property to none
- Effect.Puff: It can be used for removing the element from the DOM and then grow from the center while fading away into invisibility.
- Effect.Dropout: It is used for removing an element from the DOM.
- Effect.Shake: It can shake the element back and forth in the horizontal direction.
- Effect.SwitchOff: It can resize the element vertically from the top and bottom towards its centerline, and then removes it from the DOM.
- Effect.BlindDown: It can simulate window blind down, the content remains at its place.
- Effect.BlindUp: It can simulate the window blind up, the content remains at its place.
- Effect.SlideDown: It can simulate the window blind down, the content scrolls down.
- Effect.SlideUp:It can simulate window blind up, the content scrolls up.
- Effect.Pulsate: It can fade the element to zero opacity and then back to one five times.
- Effect.Squish: It simulates the effect that the element is pinched into its upper-left point until it vanishes.
- Effect.Fold: It simulates the effect of folding up the element.
- Effect.Grow: It simulates zooming out the element.
- Effect.Shrink: It simulates shrinking the element to its top-left corner.
- Effect.Toggle: It allows toggling between hiding and show, slide up and slide down, and blind up and blind down.
All the core effects support various common parameters, also some effects have effect-specific parameters. These effect names are case-sensitive
Common Parameters:
|
Options |
Description |
|
|
duration |
To specify the duration of the effect (in float) | |
|
fps |
To specify the number of frames to be targeted in one second | |
|
transition |
Gives a function that modifies the current points of the animation(between 0 and 1). Available transitions:
|
|
|
from |
Sets the starting point of the transition, takes float value between 0 and 1. | |
|
to |
Sets the endpoint of the transition, takes float value between 0 and 1. | |
|
sync |
If set to true, you can render frames manually by calling the render() instance method of an effect. By default, frames render automatically |
|
|
queue |
Can be used to set queuing options | |
|
delay |
Can be used to set delay in an effect. | |
Example:
<html>
<head>
<script type="text/javascript" src="./javascript/prototype.js">
</script>
<script type="text/javascript" src=
"./javascript/scriptaculous.js?load = effects">
</script>
<script>
function transitionEffect(element) {
new Effect.Opacity(element, {
duration: 2.0,
transition: Effect.Transitions.linear,
from: 1.0,
to: 0.5
});
};
</script>
</head>
<body>
<div onclick=transitionEffect(div)>
<button>Transition</button>
</div>
<div id="div">
<p>Transition of the text
(changing opacity)</p>
</div>
</body>
</html>
|
Output:
Callback Methods: The options parameter can also be supplied with callback methods so that you can have the script executed at various events while the effect is running. The callbacks are supplied with a reference to the effect object as a parameter.
|
callback |
Description |
|
beforeStart |
It is called before the effects rendering loop is started. |
|
beforeSetup |
It is called before the effect is set up. |
|
afterSetup |
It is called after the effect is set up and immediately before the main effects rendering loop is started. |
|
beforeUpdate |
It is called on each iteration of the effects rendering loop before redraw takes place. |
|
afterUpdate |
It is called on each iteration of the effects rendering loop after redraw takes place. |
|
afterFinish |
It is called after the last redraw of the effect was made. |
Example:
<html>
<head>
<script type = "text/javascript" src = "./javascript/prototype.js">
</script>
<script type = "text/javascript" src =
"./javascript/scriptaculous.js?load = effects">
</script>
<script>
function OnFinish(div){
alert("OnFinish called: " + div.element.id);
}
function OnStart(div){
alert("OnStart called: " + div.element.id);
}
function callBackMethods(div){
new Effect.Highlight(div,
{
duration: 0.5,
afterFinish: OnFinish,
beforeStart: OnStart
}
);
}
</script>
</head>
<body>
<div onclick = "callBackMethods(this)" id = "div">
<button>callBack</button>
</div>
</body>
</html>
|
Output:
Properties of and methods:
|
Variable |
Description |
|
effect.element |
The element on which the effect is applied. |
|
effect.options |
It holds the options given to the effect. |
|
effect.currentFrame |
It is the number of the frame rendered lastly. |
|
effect.startOn, effect.finishOn |
It is the time (in ms) when the effect was started, and when it will be finished. |
|
effect.effects[] |
On an Effect.Parallel effect, there’s an effects[] array containing the individual effects the parallel effect is composed of. |
|
effect.cancel() |
It is used to stop the effect as is. |
|
effect.inspect() |
It is used to get the basic debugging information about the instance. |