script.aculo.us Puff Effect

In this article, we will demonstrate the effect of Puff by using JavaScript library called script.aculo.us having smooth transition from one to another. We can adjust the duration of the effect as well.

Syntax:

Effect.Puff('id_of_element');

Effect.Puff('id_of_element', { duration: 3 });

Note: To use this library we are suppose 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

Approach:

To demonstrate the use of this function we have written a small piece of code. We have written a small JavaScript function named PuffEffect() method which uses the Effect.Puff() method of this library. By clicking on Click me to Puff the Out, you will see the effect clearly.

Example: To see the effect first install the library and then open this program in the local environment.

HTML

<html> 

   <head> 

       <script type = "text/javascript" 

        src="scriptaculous-js-1.9.0/lib/prototype.js"> 

      </script> 

      <script type = "text/javascript" 

        src="scriptaculous-js-1.9.0/src/scriptaculous.js?load = effects"> 

      </script> 

      <script type = "text/javascript"> 

         function PuffEffect(element){ 

            new Effect.Puff(element, {duration:3}); 

         } 

        function displayImage(element){ 

            new Effect.Appear(element,{duration:1, from:1.1, to:1.2}); 

         } 

      </script> 

   </head> 

   <body> 

      <div onclick = "displayImage('imageId')"> 

         Click me to display the image 

      </div> 

      <br/> 

      <div id="imageId" onclick = "PuffEffect(this);"> 

       <img src = "GEEKSIMAGES/geeks1.PNG" alt = ""  /><br/> 

       Click Image to Puff Out 

     </div> 

   </body> 

</html>

Output:

Article Tags :

JavaScript

Web Technologies

script.aculo.us