script.aculo.us BlindUp Effect

0 0 2 minutes read

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('zambiatek_1')"> 
        <button type="button"> 
            Click me to ShowEffect! 
        </button> 
    </div> 
    <br><br> 
  
    <div id="zambiatek_1"> 
        <div style="width: 10%; height: 10%;  
            background-color: green;"> 
            Geeks For Geeks 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

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