Skip to content
Related Articles

Related Articles

Improve Article

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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :