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;"> neveropen </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;"> neveropen </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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen 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!