HomeCSSGenerate Snowflake On Click With HTML,CSS & Javascript

Generate Snowflake On Click With HTML,CSS & Javascript

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:

Before we move to the actual coding, let us first create the project folder structure. The project folder is called – Snowflake On Click. Enclosed in this folder are three files – index.html, style.css and script.js. These are the HTML document, the stylesheet and the script file respectively. Now without further delay let us begin the coding.

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!

 

 

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

one × four =

Most Popular

Dynamic color changer

Fruit Fall Game Javascript

Butterfly CSS Art