script.aculo.us Morph Effect

Last Updated : 20 Nov, 2020

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 Morph effect. This effect is used for smoothly changing the CSS style of an element to the one given as the parameter. We can adjust the duration of the effect as well.

Syntax:

Effect.Morph( 'element', [options] )

Parameter: This effect has a single parameter in the options object described below:

style: This represents the CSS style that the effect smoothly changes.

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 ShowEffect method which uses the Morph method of this library. The examples below demonstrate the method.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" 
        src="prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
        src="scriptaculous.js"> 
    </script> 
  
    <script type="text/javascript"> 
        function ShowEffect(element) { 
  
            // Using the Morph effect by specifying 
            // new CSS styles 
            new Effect.Morph(element, { 
                style: 'background: #f00; color: #fff;' 
            }); 
        } 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2>script.aculo.us Morph Effect</h2> 
      
    <button onclick="ShowEffect('hideshow')"> 
        Click me to Morph the line! 
    </button> 
    <br /> 
    <br /> 
  
    <div id="hideshow" style="background:#cccccc;"> 
        LINE TO MORPH 
    </div> 
</body> 
  
</html> 

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" 
        src="prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
        src="scriptaculous.js"> 
    </script> 
  
    <script type="text/javascript"> 
        function ShowEffect(element) { 
  
            // Using the Morph effect by  
            // specifying new CSS styles 
            new Effect.Morph(element, { 
                style:  
'height: 100px; width: 150px; color: #FF0000;' 
            }); 
        } 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2>script.aculo.us Morph Effect</h2> 
      
    <button onclick="ShowEffect('hideshow')"> 
        Click me to Morph the element! 
    </button> 
    <br /> 
    <br /> 
  
    <div id="hideshow" style= 
        "background: lightgreen;"> 
        Element to Morph 
    </div> 
</body> 
  
</html> 