This content originally appeared on DEV Community and was authored by CoderZ90
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
This content originally appeared on DEV Community and was authored by CoderZ90
CoderZ90 | Sciencx (2021-08-18T04:21:16+00:00) Creating a confetti Effect in 5 minutes. Retrieved from https://www.scien.cx/2021/08/18/creating-a-confetti-effect-in-5-minutes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.