In this article, we will demonstrate the effect of Blind Down by using a JavaScript library called script.aculo.us. The BlindDown effect offers a smooth blinding transition to the element. We can also adjust the duration of this effect as well.
Syntax :
Effect.BlindDown('id_of_element');
// or
Effect.BlindDown('id_of_element', [options]);
Options:
- duration: Duration taken to fade the element, defaults to 1.0.
- scaleX: Boolean value, defaults to false.
- scaleY: Boolean value, defaults to true.
- scaleContent: Boolean value, defaults to true.
- scaleFromCenter: Boolean value, defaults to false.
- scaleFrom: Integer value defaults to 100.
- scaleMode: Sets scaling mode with a string value, defaults to ‘box”.
- scaleTo: Integer value defaults to 100.
Note: To use this library, we are supposed to install the library and then use it in our programs. And to do so you can follow the link http://script.aculo.us/downloads.
Example 1: To demonstrate the use of this effect, we have written a small piece of code. In which we have written a small JavaScript function named ShowEffect method which uses BlindDown method of this library. By clicking on Click me to BlindDown the line! , you will see the effect clearly.
To see the effect, first install the library and then open this 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,controls"> </script> <script type="text/javascript"> function ShowEffect(element) { new Effect.BlindDown(element, { duration: 1, from: 0, to: 1.0 }); } </script> </head> <body> <div onclick="ShowEffect('neveropen_1')"> <button type="button"> Click me to BlindDown the line! </button> </div> <br><br> <div id="neveropen_1"> LINE TO BLIND DOWN </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?load = effects,controls"> </script> <script type="text/javascript"> function ShowEffect(element) { new Effect.BlindDown(element, { duration: 1, from: 0, to: 1.0 }); } </script> </head> <body> <div onclick="ShowEffect('neveropen_1')"> <button type="button"> Click me to ShowEffect! </button> </div> <br><br> <div id="neveropen_1"> <div style="width: 10%; height: 10%; background-color: green;"> Geeks For Geeks </div> </div> </body> </html> |
Output:
