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

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