script.aculo.us Squish Effect

Last Updated : 30 Nov, 2020

In this article, we will demonstrate the Squish effect by using a JavaScript library called script.aculo.us having a smooth scaling down of the size with the left corner remaining stationary. We can adjust the duration of the effect as well.

Syntax:

Effect.Squish('id_of_element');

// Or

Effect.Squish('id_of_element', { duration: dur });

Parameters:

id_of_element: It holds the element on which the effect to be applied.
duration: It holds the duration taken by this effect.

Note: To use this library, we are supposed to download or install the library and then use it in our programs. And to do so, you can follow this link http://script.aculo.us/downloads.

Approach:

To demonstrate the use of this function, we have written a small piece of code. In which we have written a small JavaScript function named SquishEffect() method which uses Squish() method of this library.
By clicking on Click Image to Squish, you will see the effect clearly.

Example 1: To see the effect first install the library and then open the following program in the local environment.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" 
        src="prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
        src="scriptaculous.js?load = effects"> 
    </script> 
  
    <script type="text/javascript"> 
        function GFGSquish(el) { 
            new Effect.Squish(el, { duration: 4 }); 
        } 
    </script> 
</head> 
  
<body> 
    <div id="myimage" onclick="GFGSquish(this);"> 
          
        <img height=200px width=200px 
            src="gfg.png" alt="gfg logo" /> 
  
        <h2>Click here to see the Squish effect </h2> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: In this example, we have changed the duration of the effect and also added a button to see the effect.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" 
        src="prototype.js"> 
    </script> 
      
    <script type="text/javascript" 
        src="scriptaculous.js?load = effects"> 
    </script> 
  
    <script type="text/javascript"> 
        function GFGSquish(el) { 
            new Effect.Squish(el, { duration: 3 }); 
        } 
    </script> 
</head> 
  
<body> 
    <div id="myimage"> 
        <img height=200px width=200px 
            src="gfg.png" alt="gfg logo" /> 
  
        <br><br> 
        <button onclick="GFGSquish('myimage');"> 
            Click here to see the effect 
        </button> 
    </div> 
</body> 
  
</html> 