Installation • Usage • Contributing
Installation
The library is written in TypeScript and compiled to an UMD module to allow integration into different environments.
Browsers
You can grab the latest version from jsdelivr.
<script src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script>The library instance is loaded into the global party object.
Node.JS
If you are using a package-managed environment, you can also install the latest version via npm.
npm install party-js
# or
yarn add party-jsTo use it, simply require or import it.
import party from "party-js";
// or
const party = require("party-js");Usage
The library essentially offers a fully customizeable particle-system implementation into HTML documents. Users of the library have the ability to create and fine-tune effects to their individual liking. The library offers a few simple effects right out-of-the-box, so you don't have to waste time re-creating simple effects.
document.querySelector(".button").addEventListener("click", function (e) {
party.confetti(this, {
count: party.variation.range(20, 40),
});
});If you want to learn more, check out the quick start guide!
Known Issues
-
"The particles are getting cut off inside the screen!"
When creating the particle container, the library calculates the document<body>'s size once. If your document size changes during the lifetime of your application you can either:- Remove the
#party-js-container. This forces the library to re-initialize the container and will re-calculate the size. All particles will remain in memory, so nothing will be lost. - Manually calculate the needed container size and update it yourself. The library does not do this on a per-frame basis, in order not to unvoluntarily slow down older devices with timeout polling, and watching for document size changes is an expensive task, as of writing.
- Remove the
Contributing
First of all, thank you so much for wanting to contribute to the project!
Please refer to the contribution guidelines when opening issues or creating pull requests.