annihilation.js

The library to add the annihilation effects on DOM element.

Live demo

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

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;

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