Dividir elementos en partículas-desintegrar. js
| Autor: | ZachSaucier |
|---|---|
| Views Total: | 1,508 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 16, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Disintegrar. js es una biblioteca de JavaScript elegante para simular los efectos de destrucción y explosión que rompen cualquier elemento DOM en partículas basadas en lienzo, fragmentos o partes.
Funcionamiento
Instale & descargar.
# NPM $ npm install disintegrate --save
Cargue el < a href = "https://github.com/niklasvh/html2canvas/releases" target = "_ blank" rel = "noopener" > html2canvas. js y desintegre las bibliotecas. js en el documento.
<script src="/path/to/html2canvas.min.js"></script> <script src="/path/to/disintegrate.js"></script>
Cree el elemento en el que desea aplicar los efectos de destrucción y explosión. Todos los atributos de de datos posibles:
- Data-dis-Container : contenedor padre
- Data-dis-ID : ID de contenedor
- Data-DIS-tipo : tipo de contenedor: "contenido", "autónomo" o "simultáneo"
- Data-dis-Particle-Type : tipo de partícula para utilizar
- Data-dis-reducción-factor : reduce el número de partículas
- Data-dis-color : color de las partículas
- datos-dis-ignorar-colores : colores para ignorar
- Data-dis-ID : ID de elemento
- Data-dis-Container-ID : ID de contenedor
<div data-dis-container> <div data-dis-type="contained"> Target element </div> </div>
Inicialice la biblioteca Disintegre. js.
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);
Registro de cambios
v1.0.1 (09/16/2018)
- Se agregó compatibilidad con varias llamadas init
