Add Confetti Effect in 5 minutes

#webdev #html #css #javascript

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

Top comments (21)

Jon Randy 🎖️ • Aug 18 '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

Hendrik Richert • Aug 18 '21 • 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.