Break Elements Into Particles – Disintegrate.js

Preview:

Description:

Disintegrate.js is a fancy JavaScript library to simulate the destruction and explosion effects that break any DOM element into canvas based particles, fragments, or parts.

How to use it:

Install & download.

# NPM
$ npm install disintegrate --save

Load the necessary html2canvas.js and Disintegrate.js libraries in the document.

<script src="/path/to/html2canvas.min.js"></script>
<script src="/path/to/disintegrate.js"></script>

Create the element on which you want to apply the destruction and explosion effects. All possible data attributes:

• data-dis-container: parent container
• data-dis-id: container ID
• data-dis-type: container type: “contained”, “self-contained” or “simultaneous”
• data-dis-particle-type: particle type to use
• data-dis-reduction-factor: reduces the number of particles
• data-dis-color: color of particles
• data-dis-ignore-colors: colors to ignore
• data-dis-id: element ID
• data-dis-container-id: container ID

<div data-dis-container>
  <div data-dis-type="contained">
    Target element
  </div>
</div>

Initialize the Disintegrate.js library.

disintegrate.init();

API methods.

// An array of all Disintegrate objects.
disintegrate.dises; 
// Intiates the simultaneous particle creation for the given Disintegrate object.
disintegrate.createSimultaneousParticles(disObj); 
// Gets the Disintegrate object for a given element.
disintegrate.getDisObj(element);
// Adds custom particle types.
disintegrate.addParticleType(Function);

Remove disintegrate object from the stored data and removes the relevant canvas from the page.

disObj.elem.addEventListener("disComplete", () => disObj.kill() );

Changelog:

06/26/2020

• Added support for passing array into init function and added CORS support for images

04/20/2020

• Added .kill() support

v1.0.1 (09/16/2018)

• Added support for multiple init calls