- Puff Effect


The Puff effect is a combination of the Opacity and Scale effects that causes the element to be removed from the document flow, and then to grow from its center while fading away into invisibility.

The net effect is that the element appears to get blown off the page in a puff of smoke.


You can use one of the following two forms to use this effect −

new Effect.Puff('id_of_element', [options]);
new Effect.Puff(element, [options]);

Effect-Specific Parameters

This effect does not have any other parameter except the common parameters.


      <title> examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects" ></script>

      <script type = "text/javascript">
         function PuffEffect(element){
            new Effect.Puff(element, {duration:3});

         function ShowImage(element){
            new Effect.Appear(element,{duration:1, from:1, to:1.0});
      <div onclick = "ShowImage('myimage')">
         Click me to display the image
      <br />
      <div id = "myimage" onclick="PuffEffect(this);">
         <img src = "/images/scriptaculous.gif" alt = "" />
         <h2>Click me to Puff me out</h2>

This will produce following result −