Skip to content
Related Articles

Related Articles

Improve Article
script.aculo.us Shrink Effect
  • Last Updated : 03 Dec, 2020

In this article, we will demonstrate the effect of Shrink by using a JavaScript library called script.aculo.us shrinking an element into a particular direction and hiding when the effect is complete. We can adjust the duration of the effect as well.

Syntax:

Effect.Shrink('id_of_element');

// or

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

// or

Effect.Shrink('id_of_element', { direction:'direction' });

Parameters:



  • id_of_element: Element on which the effect to be applied.
  • duration: Duration taken by this effect.
  • direction: The direction to be shrunk, defaults to center.

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 ShrinkEffect() method which uses Shrink() method of this library. 
  • By clicking on Click Image to Shrink, 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 src="prototype.js"></script>
    <script src=
        "scriptaculous.js?load = effects">
    </script>
  
    <script type="text/javascript">
        function ShrinkEffect(element) {
            new Effect.Shrink(element, { duration: 4 });
        }
    </script>
</head>
  
<body>
    <div id="myimage" onclick="ShrinkEffect(this);">
        <img height=200px width=200px 
            src="gfg.png" alt="gfg logo" />
  
        <h2>Click here to see the Shrink effect</h2>
    </div>
</body>
  
</html>

Output:

Example 2: In this example, we have used the direction of the effect as ‘bottom-left’ and also added a button for the effect to appear.

HTML




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

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :