Skip to content

Tutorial to setup a confetti animation on your web page using Javascript and CSS

License

Notifications You must be signed in to change notification settings

sandarutharuneth/confetti-page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Confetti Animation

Installation

Step 1

Download confetti.js file

Step 2

Link the confetti.js file to your html page

<script src="confetti.js"></script>

Step 3

Place this code inside <body>

<script>
        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()
            }, 30000); // 5000 is time that after 5 second stop the confetti ( 5000 = 5 sec)
        };
        start();
        stop();
</script>

Step 4

All done! Preview the page now. Should look like this


©️ Project Razer