Press "Enter" to skip to content

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.