Open In App

script.aculo.us Visual Effects

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

  • Effect.Transitions.sinoidal
  • Effect.Transitions.linear
  • Effect.Transitions.reverse
  • Effect.Transitions.wobble
  • Effect.Transitions.flicker
  • Effect.Transitions.pulse
  • Effect.Transitions.spring
  • Effect.Transitions.none
  • Effect.Transitions.full

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




<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




<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.


Last Updated : 30 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads