jQuery explode / burst image plug-in: 2 demos

Explode images by using jQuery

The jquery.imgexplode explodes the image with a variety of options available in that jQuery plug-in. The plug-in is quite simple to use. Just specify the image with an id or class in the image tag and refer this in the jQuery code with different options.

You may use a button for triggering the explosion or use mouse over event etc. See the demo and usage below.

A demo of using jQuery image explode plug-in

In this demo, the specified image will explode as the demo page loads. If you click the button “Explode image”, the image will explode again with the given options.

The following options are used for exploding the image:

The radius parameter specifies the radius of the explosion. The minRadius specify the minimum radius of the explosion in pixels.

The fadeTime parameter tells the time releasing rag fade. If gravity parameter is set as 0, the image will halt in “air”. See the second demo with that value:

105-0_1-jquery-image-explode

See online demo and code

The simple markup for this demo:

The script:

 

You need to include the dependency files like jQuery and plug-in JS file. The plug-in page can be downloaded here or you may get the JS file by view source the demo page.

A demo with zero gravity

If you want to keep showing the burst image then you may use the zero gravity value. It is like zero gravity in space; have an idea by looking at this demo:

jquery image burst

See online demo and code

You may check this cool plug-in by setting different parameter values on the fly by visiting the developer’s page.