Create An Image Explosion Effect In jQuery - imgexplode.js
File Size: | 358 KB |
---|---|
Views Total: | 15378 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.