DEV Community

CoderZ90
CoderZ90

Posted on

Add Confetti Effect in 5 minutes

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>

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 ๐Ÿ˜Š

Enter fullscreen mode Exit fullscreen mode

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

Discussion (16)

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
githendrik 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 Author • 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 Author

Thanks for your suggestion will change the title

Collapse
official_fire profile image
CoderZ90 Author

Yes the confetti.js is not made by me

Collapse
rabihcigar 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 Author
Collapse
rabihcigar profile image
Roby Cigar

thanks man

Thread Thread
official_fire profile image
CoderZ90 Author

Welcome

Collapse
official_fire profile image
CoderZ90 Author

Sure i will just give you a codepen link :)

Collapse
hugekontrast profile image
Ashish Khare๐Ÿ˜Ž

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

Collapse
official_fire profile image
CoderZ90 Author
Collapse
hugekontrast 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 Author

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

Collapse
official_fire profile image
CoderZ90 Author • 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 )