Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

script.aculo.us BlindUp Effect

  • Last Updated : 23 Nov, 2020

In this article, we will demonstrate the effect of Blind Up by using a JavaScript library called script.aculo.us. The BlindUp effect offers a smooth blinding transition to the element. We can also adjust the duration of this effect as well.

Syntax :

Effect.BlindUp('id_of_element');

// or

Effect.BlindUp('id_of_element', [options]);

Options:

  • duration: Duration take to fade the element, default value is 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 this 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 BlindUp method of this library. By clicking on Click me to BlindUp 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.BlindUp(element, 
            { duration: 1, from: 0, to: 1.0 });
        }
    </script>
</head>
  
<body>
    <div onclick="ShowEffect('hideshow')">
        <button type="button">
            Click me to BlindUp the line!
        </button>
    </div>
    <br><br>
  
    <div id="hideshow">
        LINE TO BLIND UP
    </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.BlindUp(element, 
            { duration: 1, from: 0, to: 1.0 });
        }
    </script>
</head>
  
<body>
    <div onclick="ShowEffect('geeks_1')">
        <button type="button">
            Click me to ShowEffect!
        </button>
    </div>
    <br><br>
  
    <div id="geeks_1">
        <div style="width: 10%; height: 10%; 
            background-color: green;">
            Geeks For Geeks
        </div>
    </div>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!