Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to generate snowflake on a mouse click. To create this project we need HTML, CSS and just some simple javascript. These snowflakes also come with a stunning fall animation.
I also have other amazing javascript project tutorials on my youtube channel. Also, I have grouped them all in this playlist here. You can check out the tutorial here.
Video Tutorial:
If you are interested in learning this through a video tutorial, you can check out the video version of this tutorial here down below. I post regular tutorials on my youtube channel, so do subscribe to my channel, so you don’t miss any of these tutorials.
Project Folder Structure:
HTML:
We start with the HTML section, Now copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snowflake On Click</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Now let us create the style for the snowflake div. We use CSS. Firstly copy the code below and paste it into your stylesheet.
* {
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(#12a7f9, #008aef);
overflow: hidden;
}
.snowflake {
position: absolute;
background-image: url("snowflake-image.svg");
background-size: cover;
border-radius: 50px;
animation: fall 2s linear infinite;
}
@keyframes fall {
0% {
transform: translate(50%, 50%);
opacity: 1;
}
100% {
transform: translate(50%, 1000%);
opacity: 0;
}
}
Javascript:
Now we just need to add functionality to this code. For this purpose, we use javascript. Do copy the code provided below and paste it into your javascript file.
document.addEventListener("click", (e) => {
//create span for snowflake
var snowflake = document.createElement("span");
snowflake.classList.add("snowflake");
//set position of snowflake to mouse pointer's position
snowflake.style.left = e.offsetX + "px";
snowflake.style.top = e.offsetY + "px";
//select random number between 20 and 100
var size = Math.random() * (100 - 20 + 1) + 20;
//set width and height
snowflake.style.width = size + "px";
snowflake.style.height = size + "px";
document.body.appendChild(snowflake);
setTimeout(() => {
snowflake.remove();
}, 1000);
});
That’s it for this tutorial. Your project is now ready. You can go ahead and customize the code the way you want. You can the snowflake image to a different one or even change the interval for the timeout.
I would love to hear from you. So if you have ideas, suggestions or feedback do comment them below. If you face any issues while creating this project you can download the source code by clicking the download code button below. I have included the snowflake SVG with the source code. By clicking the download button you can download the image as well.
Stay tuned for more such tutorials. Happy Coding!
Â
