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 Background is very impressive when it's a Birthday wishes website, Inaugration website, or something related to wishes or parties.
There is also a video tutorial available on my channel
Confetti Video Tutorial Link - https://www.youtube.com/watch?v=quSR_ZrVz6Y&t=44s
So the first step we need to do is download 1 file ( we are using javascript library )
Link to download - https://github.com/CoderZ90/confetti/blob/main/confetti.js
You can follow my tutorial to make it or keep reading the blog to make it :)
Step 01
Create a index.html file and put the following code here in this we are link our confetti.js file and also linking our css file which is style.css - one more cool thing is you can modify the confetti.js file according to your needs if you want to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- link css file to style -->
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<p>Confetti Js Effect š</p>
<!-- Here link the script file which you downloaded from the above link -->
<script src="confetti.js"></script>
<!-- Our javascript code comes here -->
</body>
</html>
Step 02
After you have done this you can go to css file and style it whatever you want to in this we are just changing the background color and the text color just for learning purpose we are keeping it simple as possible š„
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* Putting font poppins it is a very beautiful font also if you dont have installed it on your system it might not show so you need to import it from *google fonts* */
font-family: 'Poppins';
}
/* Now here we are just styling the background and centering it to the middle */
html,
body {
width: 100%;
height: 100%;
background: #f1f1f1;
display: flex;
align-items: center;
justify-content: center;
}
p {
font-size: 4rem;
text-shadow: 0 0 10px;
}
Step 03
Now the javascript time we all were waiting for. so in html create a script tag and put this code inside it
// for starting the confetti
const start = () => {
setTimeout(function() {
confetti.start()
}, 1000); // 1000 is time that after 1 second start the confetti ( 1000 = 1 sec)
};
// for stopping the confetti
const stop = () => {
setTimeout(function() {
confetti.stop()
}, 5000); // 5000 is time that after 5 second stop the confetti ( 5000 = 5 sec)
};
// after this here we are calling both the function so it works
start();
stop();
// if you dont want to make it stop and make it infinite you can just remove the stop function š
So finally we are done Thankyou for giving your time and reading this blog. i hope after reading this blog you will be able to create it in minutes šš
Thankyou again and also subscribe to my channel for more videos / blog like this āš
Subscribe - https://youtube.com/c/CodingFire?sub_confirmation=1
More tutorials -
Background Remover Like Remove.bg - https://www.youtube.com/watch?v=f_rpLBzunbQ&t=70s
Brightness slider - https://www.youtube.com/watch?v=bSQ-QD1Iqi0
Theme changer - https://www.youtube.com/watch?v=ZXTsYjxv7-g&t=3s
Desktop app using javascript - https://www.youtube.com/watch?v=v0n0OMkUQac
Top comments (21)
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
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.
Definitely not the author - the same code can be found in many places all over the web. Random example: python2.net/questions-336875.htm
Hendrik i am not the author the plugin is made by another guy š i just made a tutorial using it
Yes the confetti.js is not made by me
Thanks for your suggestion will change the title
how to change width of confetti impact?
You can change it using css easily :)
I hope that you also provide the result by screenshot or attach a codepen :D
coderz90.github.io/confetti/
thanks man
Welcome
Sure i will just give you a codepen link :)
Where is codepen? I would have loved to see some live action to decide.
coderz90.github.io/confetti/
Very nice. Can you make it pop from the bottom like from a confetti popper.
You mean when we click a button then the confetti start ?
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...
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 )
How to do this at onclick event?
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