Author: | YilianSource |
---|---|
Views Total: | 8,029 views |
Official Page: | Go to website |
Last Update: | July 11, 2022 |
License: | MIT |
Preview:

Description:
Party.js is a JavaScript library used to create a confetti visual effect or confetti falling animation on the page.
How to use it:
1. Install and import the Party.js as an ES module.
# Yarn $ yarn add party-js # NPM $ npm i party-js
import party from "party-js";
2. Or just simply insert the party.min.js
script into the document.
<script src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script>
3. Create a default Confetti Animation.
party.confetti(element);
4. Create a default sparkles animation.
party.sparkles(element);
5. Available configuration options.
party.confetti(element,{ /** * Whether the debugging mode should be enabled. */ debug: false, /** * The amount of gravity to apply to particles in the scene, in pixels. * Note that this value is positive by default, since the y-axis increases * downwards in a DOM. */ gravity: 800, /** * The z-index to place the DOM containers at. */ zIndex: 99999, });
// or globally party.settings.debug = true;
6. Customize the shapes:
- square
- rectangle
- circle
- roundedSquare
- roundedRectangle
- star
party.confetti(element, { shapes: ["square", "circle", "roundedRectangle"] });
party.resolvableShapes["myShape"] = `<img src="myShape.png"/>`;
7. Use variations to allow the variation/customization of individual values.
party.confetti(myElement, { // returns a random number from min to max count: party.variation.range(20, 40) }); // skews the specified value by a specified, absolute amount party.variation.skew(value, amount); // skews the specified value by a specified percentage party.variation.skewRelative(value, percentage); // returns a random sample from the given spline party.variation.splineSample(spline); // returns a random colour sample from the given gradient. party.variation.gradientSample(gradient);
Changelog:
v2.2.0 (07/11/2022)
- add shape support to sparkles template
v2.1.3 (06/08/2022)
- remove source maps
v2.1.2 (10/12/2021)
- fixed the previous patch files
- added prepublish hook
v2.1.0 (10/09/2021)
- expose sparkle lifetime, organize imports
v2.1.0 (09/26/2021)
- fix container size
- removed stale
- upgrade security packages
- Feature/reduced motion
- fix container size, added dev server
- chore: update typedoc-plugin-markdown to 3.10.1
- Improve library exports
- Added generated API
v2.0.1 (09/25/2021)
- fix container size
v2.0.0 (05/13/2021)
- Feature/better emission
v2.0.0 (05/10/2021)
- improvements
v2.0.0 (04/19/2021)
- Rewritten
- Doc & Demo update
v1.0.4 (01/12/2021)
- Update party.js to keep the rendering always on top
- Add an init function
v1.0.3 (01/03/2021)
- Fixed references
v1.0.2 (01/02/2021)
- Added proper AMD/CJS/Browser loading support
11/05/2020
- v1.0.1
11/03/2020
- Added default shapes
10/30/2020
- Added color class & gradient
10/28/2020
- Added randomization function