Create An Image Explosion Effect In jQuery - imgexplode.js

imgexplode.js is a simple, CSS-less jQuery plugin which helps you apply a configurable pixel (fragment) explosion effect to your images.

How to use it:

1. Add the latest version of jQuery library and the jQuery imgexplode.js script to the webpage.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<!-- <script src="dist/jquery.imgexplode.min.js"></script>-->
<script src="jquery.imgexplode.js"></script>

2. Call the explode() function on target image where you want to apply the pixel explosion effect.

$("img").explode();

3. Restore the image.

$("img").explodeRestore();

4. Config the pixel explosion effect with the following options.

$("img").explode({
  omitLastLine = false,
  radius = 80,
  minRadius = 20,
  release = true,
  fadeTime = 300,
  recycle = true,
  recycleDelay = 500,
  fill = true,
  explodeTime = 300,
  maxAngle = 360,
  gravity = 0,
  round = false,
  groundDistance = 400,
  ignoreCompelete = false,
  land=true,
  checkOutBound,
  finish,
});

Change log:

2017-08-05

• prevent out-document explode

2016-11-21

• fix bg-color

2016-11-20

• add some params

2016-11-13

• fix bg image

2016-11-12

• fix noradius flag
• support background-image

2016-11-02

• support border-radius

2016-10-03

• added more options

2016-10-02

• bugfix

---

This awesome jQuery plugin is developed by blackmiaool. For more Advanced Usages, please check the demo page or visit the official website.