DEV Community

Add Confetti Effect in 5 minutes

CoderZ90 on August 18, 2021

Hello guys 😊 Hope you are safe. So after reading this blog i hope you will be able to create a confetti effect just in 5 minutes Confetti Falling ...
Collapse
 
jonrandy profile image
Jon Randy 🎖️

A better title would be "Using a confetti Effect in 5 minutes" as you're not creating it at all - rather loading a third party script and calling a function to do it

Collapse
 
hendrikomg profile image
Hendrik Richert • Edited

I mean, they appear to be the author of this library, so posting a tutorial here on how to use it seems fair.
I would have loved to see a live demo in codepen or similar though.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Definitely not the author - the same code can be found in many places all over the web. Random example: python2.net/questions-336875.htm

Collapse
 
official_fire profile image
CoderZ90 • Edited

Hendrik i am not the author the plugin is made by another guy 😊 i just made a tutorial using it

Collapse
 
official_fire profile image
CoderZ90

Yes the confetti.js is not made by me

Collapse
 
official_fire profile image
CoderZ90

Thanks for your suggestion will change the title

Collapse
 
widhyarsana profile image
widhy arsana

how to change width of confetti impact?

Collapse
 
official_fire profile image
CoderZ90

You can change it using css easily :)

Collapse
 
robycigar profile image
Roby Cigar • Edited

I hope that you also provide the result by screenshot or attach a codepen :D

Collapse
 
official_fire profile image
CoderZ90
Collapse
 
robycigar profile image
Roby Cigar

thanks man

Thread Thread
 
official_fire profile image
CoderZ90

Welcome

Collapse
 
official_fire profile image
CoderZ90

Sure i will just give you a codepen link :)

Collapse
 
ashishk1331 profile image
Ashish Khare😎

Where is codepen? I would have loved to see some live action to decide.

Collapse
 
official_fire profile image
CoderZ90
Collapse
 
ashishk1331 profile image
Ashish Khare😎 • Edited

Very nice. Can you make it pop from the bottom like from a confetti popper.

Thread Thread
 
official_fire profile image
CoderZ90

You mean when we click a button then the confetti start ?

Collapse
 
official_fire profile image
CoderZ90 • Edited

Thankyou for giving your time and reading this and also dont froget to subscribe to my channel for more videos / blog like this ✌🙏

Subscribe - youtube.com/c/CodingFire?sub_confi...

More tutorials -

Background Remover Like Remove.bg - https://www.youtube.com/watch?v=f_rpLBzunbQ&t=70s

Brightness slider - youtube.com/watch?v=bSQ-QD1Iqi0

Theme changer - https://www.youtube.com/watch?v=ZXTsYjxv7-g&t=3s

Desktop app using javascript - youtube.com/watch?v=v0n0OMkUQac

The confetti.js is made by another guy ( third party )

Collapse
 
ayush200821 profile image
Ayush2008-21

How to do this at onclick event?

Collapse
 
official_fire profile image
CoderZ90

You can simply just create a button and then create a function with any name

Fir eg.

const confettiOn= () =>{
...code
}

And inside call the function used to create confetti effect

And then in button call the onClick action like this


Confetti effect

Collapse
 
javalsu profile image
JAVIER SOSA

Came across this and love the improvements! I wrote the initial script years ago for a tradeshow booth and love how it's evolved and is still used by the community.

Here's the OG SO questions. The first confetti script was actually a variation I did to a snowfall script.

stackoverflow.com/questions/163228...