script.aculo.us Squish Effect
Last Updated :
30 Nov, 2020
In this article, we will demonstrate the Squish effect by using a JavaScript library called script.aculo.us having a smooth scaling down of the size with the left corner remaining stationary. We can adjust the duration of the effect as well.
Syntax:
Effect.Squish('id_of_element');
// Or
Effect.Squish('id_of_element', { duration: dur });
Parameters:
- id_of_element: It holds the element on which the effect to be applied.
- duration: It holds the 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 SquishEffect() method which uses Squish() method of this library.
- By clicking on Click Image to Squish, 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 type = "text/javascript"
src = "prototype.js" >
</ script >
< script type = "text/javascript"
src = "scriptaculous.js?load = effects" >
</ script >
< script type = "text/javascript" >
function GFGSquish(el) {
new Effect.Squish(el, { duration: 4 });
}
</ script >
</ head >
< body >
< div id = "myimage" onclick = "GFGSquish(this);" >
< img height = 200px width = 200px
src = "gfg.png" alt = "gfg logo" />
< h2 >Click here to see the Squish 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 type = "text/javascript"
src = "prototype.js" >
</ script >
< script type = "text/javascript"
src = "scriptaculous.js?load = effects" >
</ script >
< script type = "text/javascript" >
function GFGSquish(el) {
new Effect.Squish(el, { duration: 3 });
}
</ script >
</ head >
< body >
< div id = "myimage" >
< img height = 200px width = 200px
src = "gfg.png" alt = "gfg logo" />
< br >< br >
< button onclick = "GFGSquish('myimage');" >
Click here to see the effect
</ button >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...