Blasts emoji like fireworks all up in your HTML page. ๐
A straightforward library that triggers fireworks blasts of emoji in your page. Tell it to start once, or many times, and it will _just work_. โจ Even better, the library is shockingly customizable. You can configure virtually everything from emojis, sizing, and velocities. See the demos on **[emojisplosion.dev](https://emojisplosion.dev)**. ## Usage You can directly use Emojisplosion on its own, or as a part of a framework bundle. It provides two functions: - `emojisplosion()`: launches a single blast of emojis at random locations on the page. - `emojisplosions()`: starts calling `emojisplosion` on a random interval of every few seconds. ### Direct Usage Plop this ๐ at the end of your `.html` ``: ```html ``` That โ loads Emojisplosion soon after your page loads and starts emojisplosions as soon as it can. ๐. Alternately, to create global `emojisplosion` and `emojisplosions` functions: ```html ``` ### Framework Usage First install the `emojisplosion` package as a dependency: ```shell npm i emojisplosion ``` You can then import it in your code to access its `emojisplosion` and `emojisplosions` functions: ```ts import { emojisplosion, emojisplosions } from "emojisplosion"; // Just one explosion, please. emojisplosion(); // Commence explosions! emojisplosions(); ``` ## Explanation Each `emojisplosion` causes a fireworks-like explosion of random emoji to be placed around a random location on your page. Each explosion contains around a dozen emoji, each of which are animated in JavaScript to: - Start with a random horizontal velocity and random upward vertical velocity - Move along the page as if affected by velocity and preserving inertia After an emoji is completely hidden or out of bounds, it is removed from the page. ### Advanced Mode With Webpack and other modern JavaScript bundlers: ```javascript import { emojisplosion, emojisplosions } from "emojisplosion"; // Just one explosion, please. emojisplosion(); // Commence explosions! emojisplosions(); ``` Oh, and Emojisplosion is written in TypeScript and ships with its own typings. ๐ฃ ### Configuration `emojisplosion` and `emojisplosions` are highly configurable. The following may be passed to both via configuration objects. > Suggestion: see the generated `.d.ts` under `./lib` for full API descriptions. #### `className` Type: `string` or `() => string` CSS class name to add to all emoji elements. Defaults to `"emoji-styles"`. ```javascript emojisplosion({ className: "my-emoji-styles", }); ``` Whenever a new `className` is passed to `emojisplosion`, a new `