Break Elements Into Particles – Disintegrate.js

Category: Animation , Javascript | September 16, 2018
Author: ZachSaucier
Views Total: 890
Official Page: Go to website
Last Update: September 16, 2018
License: MIT

Preview:

Break Elements Into Particles – Disintegrate.js

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);

Changelog:

v1.0.1 (09/16/2018)

  • Added support for multiple init calls

Leave a Reply