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: