annihilation.js
The library to add the annihilation effects on DOM element.
Live demo
NPM
npm install @exnext/annihilation.js
Initialization
<script type='text/javascript' src='annihilation.js'></script>
or
import { annihilation } from '@exnext/annihilation';
Options
interface IAnnihilationOptions {
element: string | HTMLElement;
removeElement: boolean;
columns?: number;
rows?: number;
animationCssClass?: string;
}
Property | Type | Description |
---|---|---|
element | string or HTMLElement | The DOM element with you want to annihilation |
removeElement | boolean | If true, defined element will be removed from parent. Default value is true |
columns | number | Number of columns |
rows | number | Number of rows |
animationCssClass | string | CSS class with defined animation |
Details for columns and rows
If neither columns nor rows are defined then default value for columns is 10. For defined columns without rows, rows will be computed proportional by element size. The same is for defined rows without columns. You can also define values for columns and rows. Then piece (cell) of the converted image won't be square.
Executing annihilation
To execute annihilation on DOM element you should invoke doIt
method after defined all properties and events. Look at examples below.
Events
To register event use the on
method
on(name: string, callback: Function): this;
Event | Description | Type of callback parameter |
---|---|---|
created-cell | Called after each cell is created. You can use it to redefine animation and other details. | ICellParams |
cell-animation-end | Called for each cell after its animation end. | ICellAnimationEnd |
before-annihilation | Called before annihilation effect. By `cellsLeft` you have information on how many cell still exist. | IBeforeAnnihilation |
after-annihilation | Called after annihilation effect. You can use it for cleaning. | IAfterAnnihilation |
interface ICellParams {
/* Number of columns */
columns: number;
/* Number of rows */
rows: number;
/* X-Position of cell */
column: number;
/* Y-Position of cell */
row: number;
/* DOM element to annihilation */
element: HTMLElement;
/* Cell, piece of annihilation element*/
cell: HTMLElement;
}
interface IBeforeAnnihilation {
/* DOM element to annihilation */
element: HTMLElement;
/* Prepared element used in annihilation effect */
annihilationElement: HTMLElement;
}
export interface IAfterAnnihilation {
/* DOM element to annihilation */
element: HTMLElement;
}
interface ICellAnimationEnd {
/* Still existing cells */
cellsLeft: number;
/* Cell details */
cellParams: ICellParams;
}
Simple usage
<img src="image.jpg" id="img_demo" />
<script>
annihilation({ element: '#img_demo' }).doIt();
</script>
Example usage
<img src="image.jpg" id="img_demo" />
<script>
annihilation({
element: '#img_demo',
columns: 20,
rows: 20,
animationCssClass: 'animate__animated animate__zoomOut'
})
.on('created-cell', (params) => {
let multiplier = params.row + params.column;
params.cell.style.animationDelay = 0.05 * multiplier + 's';
})
.doIt();
</script>
Used with animate.css, bootstrap or others
You may use the popular library with prepared animations or another that you know. Look at the live demo to see some examples.
Preview render content before annihilation
The annihilation.js uses html2canvas library to create the image used for annihilation effects. Sometimes it doesn't look good, there could be some trouble with that. You can use annihilationPreview
to check the converted image before using the main annihilation library.
<script type='text/javascript' src='annihilation.js'></script>
or
import { annihilationPreview } from '@exnext/annihilation';
<div id="demo">
<img src="some_image.jpg" />
<div> Any text </div>
</div>
<script>
annihilationPreview({ element: '#demo' }).doIt();
</script>
TODO
- replacing html2canvas library with something faster
- adding more custom animation effects