Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yiliansource/party-js
A JavaScript library to brighten up your user's site experience with visual effects!
https://github.com/yiliansource/party-js
emitters javascript-library particles party visual-effects
Last synced: 10 days ago
JSON representation
A JavaScript library to brighten up your user's site experience with visual effects!
- Host: GitHub
- URL: https://github.com/yiliansource/party-js
- Owner: yiliansource
- License: mit
- Created: 2020-10-22T14:40:41.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-04T13:59:37.000Z (over 1 year ago)
- Last Synced: 2024-10-25T02:29:48.441Z (15 days ago)
- Topics: emitters, javascript-library, particles, party, visual-effects
- Language: TypeScript
- Homepage: https://party.js.org
- Size: 3.27 MB
- Stars: 991
- Watchers: 10
- Forks: 45
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesomeLibrary - party-js - A JavaScript library to brighten up your user's site experience with visual effects! (语言资源库 / typescript)
- awesome-web-cn - party-js - 一个为你的网站添加粒子效果的库,让你的网站变得更加炫酷 (Uncategorized / Uncategorized)
README
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](https://www.jsdelivr.com/).
```html
```
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].
```bash
npm install party-js
# or
yarn add party-js
```
To use it, simply `require` or `import` it.
```ts
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.
```js
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](https://party.js.org/docs/) guide!
## Known Issues
- _"The particles are getting cut off inside the screen!"_
When creating the particle container, the library calculates the document ``'s size _once_. If your document size changes during the lifetime of your application you can either:
1. 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.
2. 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.
## Contributing
First of all, thank you so much for wanting to contribute to the project! ❤
Please refer to the [contribution guidelines](./.github/CONTRIBUTING.md) when opening issues or creating pull requests.
[npm]: https://www.npmjs.com/package/party-js