A jQuery burst animation plug-in for images

Create burst animation for images

The boomjs is a jQuery based plugin that creates burst animation for the element in DOM. You may specify the container and image by using the jQuery code with two available options.

The options are to specify the size of pieces by using the piece_size option while you may also set the duration of burst animation by using the duration option. Both of these options are used in the demos below.

Demo 1 Demo 2
Developer’s page Download plug-in

Setting up the boomjs plug-in?

Step 1

Download the plug-in zip file from Github website and get the boom.js file.

Step 2

Include the reference to the jQuery and boom.js file:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>

<script src=”js/jquery-boom/boom.js”></script>

Initiate the plug-in with img_url option:

  $('#burst-ani-demo').boom({

       img_url: 'images/banana.jpg',

    })

A demo of image burst animation with default settings

In the demo below, only the image URL is specified in the jQuery code. While the size of pieces and duration will use the default values. Click on the image after opening the demo and see how burst animation occurs:

jQuery burst animation

See online demo and code

The CSS, HTML and jQuery code:

 <style>

  #burst-ani-demo {

   margin: 100px auto;

   height: 300px;

   width: 250px;

                                }

</style>

</head>

<body>

<div id="burst-ani-demo"></div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/jquery-boom/boom.js"></script>

<script>

  $('#burst-ani-demo').boom({

   img_url: 'images/banana.jpg',

})

</script>

 

A demo with duration and piece_size option

The piece_size option sets the size of small box of an image after it bursts. The more the value, the bigger will be the size. The duration sets the total time from start to the end of bursting the image.

For the demo, I have set the piece size as 30 and burst duration as 3 seconds i.e. 3000 milliseconds:

jQuery burst animation duration

See online demo and code

The code:

<script>

                $('#burst-ani-demo').boom({

                                img_url: 'images/donut.png',

        piece_size: 30,

        duration: 3000



                })

</script>

 

Get the complete code from the demo page.