September 16, 2022

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!

javascript celebration effect, falling animation css, javascript confetti explosion, confetti animation css, party popper css animation, confetti js download

How to make use of it:

1. To set up the library, simply merely insert the celebration.min.js script into the doc.

<script src="./party.min.js"></script>

2. Spawns particles (confetti) from the mouse place retrieved from the present cursor event.

party.cursor({
  count: 40,
  countVariation: 0.5,
  angleSpan: 80,
  yVelocity: -300,
  yVelocityVariation: 1,
  rotationVelocityLimit: 6,
  scaleVariation: 0.8
});

3. Spawns particles from a specified HTML component.

party.element(document.getElementById("selector"), {
  count: 40,
  countVariation: 0.5,
  angleSpan: 80,
  yVelocity: -300,
  yVelocityVariation: 1,
  rotationVelocityLimit: 6,
  scaleVariation: 0.8
});

4. Spawns particles from a specified position, relative to the viewport.

party.position(x, y,  {
  count: 40,
  countVariation: 0.5,
  angleSpan: 80,
  yVelocity: -300,
  yVelocityVariation: 1,
  rotationVelocityLimit: 6,
  scaleVariation: 0.8
});

5. Create confetti falling animation:

party.screen({ 
   count: 500 * (window.innerWidth / 1980),
  countVariation: 0.5,
  angleSpan: 0,
  yVelocity: -100,
  yVelocityVariation: 2,
  rotationVelocityLimit: 6,
  scaleVariation: 0.8
});

Simple Celebrate Confetti Animation In JavaScript, party JS Plugin/Github, canvas confetti example, confetti js cdn


See Demo And Download

Official Website(YilianSource): Click Here

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

Share

You may also like...

Leave a Reply

Your email address will not be published.