Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into a UMD module to allow integration into different environments.

The library mainly introduces fully customizable particle system implementation in HTML documents. Library users have the ability to create and adjust effects to their individual desires. The library offers some simple effects right out of the box, so you won’t have to waste time recreating simple effects.

Must Read: Pure CSS Fullscreen Falling Leaves Animation Effect

How to make use of it:

Installation:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/bundle/party.min.js"></script>

1. 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-js

2. To use it, you just need to order it or import it.

import party from "party-js";
// or
const party = require("party-js");

3. Usage

document.querySelector(".button").addEventListener("click", function (e) {
    party.confetti(this, {
        count: party.variation.range(20, 40),
    });
});

See Also –

Simulating Rendering Raindrops Falling On A Window | rainyday.js
Create a Beautiful Star Falling Background with starback.js
JavaScript Library That Falling Particles With The Sparticles


See Demo And Download

Confetti-Falling-Animation-Effect-party

Official Website(YilianSource): Click Here

This superior jQuery/javascript plugin is developed by YilianSource. For extra Advanced usage, please go to the official website.

Related Posts

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

browser-alert-confirm-dialog-alert4html-js

Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

alert4html.js is a JavaScript library that enables you to insert HTML directly into your browser alerts while simulating Chrome alerts as well. alert4html.js is an alternative to…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…

bootstrap-5-multi-level-dropdown

Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…

jquery-confirmation-dialog

JQuery UI Built Dynamic Modal That Uses Bootstrap | confirm.js

confirm.js is to use confirm modal created using JQuery and Bootstrap. Put events in each custom button in your web application. Easy to implement, saves time. Requirements…

bootstrap-responsive-navbar

[Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile

The Bootstrap 5-off-canvas navigation menu is a responsive navigation system that combines BS5 components outside of the canvas and navbar. Must Read: Pure CSS Mobile-friendly Responsive Table…

Leave a Reply

Your email address will not be published. Required fields are marked *