script.aculo.us Pulsate Effect

script.aculo.us Scale Effect

Last Updated : 20 Nov, 2020

This effect is used for gradually scaling an element up or down, either vertically or horizontally. It changes an element width and height dimensions and the base for em units.

Syntax:

new Effect.Scale('element_id', percent, [options]);
or
new Effect.Scale(element, percent, [options]);

Effect Options

Option	Description
scaleX	Sets whether the element should be scaled horizontally, by default its true.
scaleY	Sets whether the element should be scaled vertically, by default its true.
scaleContent	Sets whether content scaling should be enabled, by default its true.
scaleFromCenter	If true, scale the element in a way that the center of the element stays on the same position on the screen, by default its false.
scaleMode	Either ‘box’ (default, scales the visible area of the element) or ‘contents’ (scales the complete element, that is parts normally only visible byscrolling are taken into account). You can also control the size of the element by assigning the originalHeight and originalWidth variables to scaleMode. Example: scaleMode: { originalHeight: 900, originalWidth: 900 }
scaleFrom	Sets the starting percentage for scaling, by default its 100.00.

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>script.aculo.us examples</title> 
  
    <script type="text/javascript" 
        src="./javascript/prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
src="./javascript/scriptaculous.js?load = effects"> 
    </script> 
  
    <script type="text/javascript"> 
        function ScaleEffect(element) { 
            new Effect.Scale(element, 150); 
        } 
    </script> 
</head> 
  
<body> 
    <div onclick="ScaleEffect(this)"> 
        <h3>Click me to Scale</h3> 
    </div> 
</body> 
  
</html> 

Output:

script.aculo.us Pulsate Effect

S

swapnil074

Improve

Article Tags :

Similar Reads

script.aculo.us Fade Effect

In this article, we will demonstrate the effect of Fade by using a JavaScript library called script.aculo.us. The fade effect offers a smooth fading transition to the element. We can also adjust the duration of this effect as well. Syntax: Effect.Fade('element_id'); // or Effect.Fade('element_id', o

script.aculo.us Fade Effect

The script.aculo.us Effect.fade() method can be used to fade away from the DOM. The Effect.Fade() can be used with Effect.Appear() method to fade away the content and then show it again. Syntax: new Effect.Fade(id_of_element, [options]); This effect does not have any specific parameters. The common

script.aculo.us Pulsate Effect

In this article we will demonstrate the effect of Pulsate by using JavaScript library called script.aculo.us having smooth transition from one to another. We can adjust the duration of the effect as well. Syntax: Effect.Pulsate('id_of_element'); Effect.Pulsate('id_of_element', { pulses: 5, duration:

script.aculo.us Parallel Effect

The script.aculo.us library is a cross-browser library that aims to improving the user interface of a website. In this article, we will demonstrate the Parallel effect. This effect is used for combining multiple effects for use on the given element. We can adjust the duration of the effect as well.

script.aculo.us Fold Effect

In this article, we will demonstrate the effect of Fold by using a JavaScript library called script.aculo.us having a smooth scaling down first in the vertical direction and then horizontal toward the left to finally disappear. We can adjust the duration of the effect as well. Syntax: Effect.Fold('i

script.aculo.us Move Effect

The script.aculo.us library is a cross-browser library that aims to improving the user interface of a website. In this article, we will demonstrate the Move effect. This effect is used for making the element smoothly move to the given parameters. We can adjust the duration of the effect as well. Syn

script.aculo.us Multiple Effect

The script.aculo.us library is a cross-browser library that aims to improving the user interface of a website. In this article, we will demonstrate the Multiple effect. This effect is used for applying the given effect to multiple elements on the page. We can adjust the speed and delay of the effect

script.aculo.us Grow Effect

The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. In this article, we will demonstrate the Grow effect. This effect is used for making the element grow with a smooth transition from a direction. We can adjust the duration of the effect as

script.aculo.us Puff Effect

In this article, we will demonstrate the effect of Puff by using JavaScript library called script.aculo.us having smooth transition from one to another. We can adjust the duration of the effect as well. Syntax: Effect.Puff('id_of_element'); Effect.Puff('id_of_element', { duration: 3 }); Note: To use

script.aculo.us Opacity Effect

The script.aculo.us Opacity effect is one of the core effects which allows us to gradually change an element's opacity to a given level. This effect starts with the element's current opacity unless the 'from' option is defined and ends with an opacity defined by the 'to' option, the default opacity