Snowfall with Javascript

Hello people! It’s Christmas time! So let’s create a snowfall effect with JavaScript. It’s only pure JavaScript. No jQuery or other libraries. Just plain JavaScript. So let’s create snowfall with Javascript.

Step 1

Open your favourite code editor.

And now create an HTML file with the following code:

<!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" />
		<title>My Snowfall</title>
	</head>
	<body>
		<script>
			// our hero code
		</script>
	</body>
</html>

And we’ll make the background darker.

<style>
	body {
		background: #1d1d1d;
	}
</style>

Now let’s start with JavaScript.

Step 2

Let’s create a function named addSnow.

let addSnow = () => {
	// code goes here
};

Then inside the function, we put these variables:

const random = (min, max) => Math.random() * (max - min) + min;
let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;

Now we’ll create a div.

let snow = document.createElement('div');

Then we’ll add some styles to the div.

snow.style.position = 'fixed';
snow.style.top = '-2px';
snow.style.right = random(0, screenWidth) + 'px';
snow.style.width = '10px';
snow.style.height = '10px';
snow.style.backgroundColor = '#fff';
snow.style.borderRadius = '50%';
snow.style.zIndex = '999';
snow.style.pointerEvents = 'none';

These styles will create something like this (Smaller):

After that animate the div.

const animateSnow = () => {
	snow.style.top = parseInt(snow.style.top) + 2 + 'px';
	snow.style.right = parseInt(snow.style.right) + random(0, 2) + 'px';
	/**
	 * If it's out of the screen, move it to the top
	 * and randomize it's position
	 * */
	if (parseInt(snow.style.top) > screenHeight) {
		snow.style.right = random(0, screenWidth) + 'px';
		snow.style.top = parseInt('-' + random(0, 20) + 'px');
	}
	window.requestAnimationFrame(animateSnow);
};
window.requestAnimationFrame(animateSnow);

And finally, we’ll add the div to the body.

document.body.appendChild(snow);

Ah, don’t forget to close the function.

};

And to add the snow we’ll just call the function 60 times.

for (let i = 0; i < 60; i++) {
	setTimeout(addSnow, i * 100);
}

And that’s it! Here’s the result:

Conclusion

Here’s a minified version of the code:

let t = () => {
	const t = (t, e) => Math.random() * (e - t) + t;
	let e = window.innerWidth,
		n = window.innerHeight,
		s = document.createElement('div');
	(s.style.position = 'fixed'),
		(s.style.top = '-2px'),
		(s.style.right = t(0, e) + 'px'),
		(s.style.width = '10px'),
		(s.style.height = '10px'),
		(s.style.backgroundColor = '#fff'),
		(s.style.borderRadius = '50%'),
		(s.style.zIndex = '999'),
		(s.style.style.pointerEvents = 'none');
	const i = () => {
		(s.style.top = parseInt(s.style.top) + 2 + 'px'),
			(s.style.right = parseInt(s.style.right) + t(0, 2) + 'px'),
			parseInt(s.style.top) > n &&
				((s.style.right = t(0, e) + 'px'), (s.style.top = parseInt('-' + t(0, 20) + 'px'))),
			window.requestAnimationFrame(i);
	};
	window.requestAnimationFrame(i), document.body.appendChild(s);
};
for (let e = 0; e < 60; e++) setTimeout(t, 100 * e);

And that’s it! You can now create a snowfall effect with JavaScript. Enjoy your Christmas! 🎄

Something wrong or just found a typo? Edit this page on GitHub and make a PR!

Snowfall with Javascript

Step 1

Step 2

Conclusion

Comments