script.aculo.us Fold Effect

0 0 2 minutes read

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('id_of_element');

// Or

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

Parameters:

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

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!