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: about 1 month 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 (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-04T13:59:37.000Z (11 months ago)
• Last Synced: 2024-05-03T18:26:57.121Z (about 2 months ago)
• Topics: emitters, javascript-library, particles, party, visual-effects
• Language: TypeScript
• Homepage: https://party.js.org
• Size: 3.27 MB
• Stars: 970
• Watchers: 10
• Forks: 46
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE.md

Lists

• awesome-web-cn - party-js - 一个为你的网站添加粒子效果的库,让你的网站变得更加炫酷 (Uncategorized / Uncategorized)
• principe-awesome-stars - yiliansource/party-js - A JavaScript library to brighten up your user's site experience with visual effects! (TypeScript)

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