How to add snow effect with JavaScript on a website

by  
Share:
How to add snow effect with JavaScript on a website

When the first snowfall hits, it gives off calm, relaxing vibes, links us to childhood memories, and reminds us of the beauty in nature. This tutorial will demonstrate to add the snow effect with JavaScript and jQuery on your website.

View Demo

How JavaScript snowfall effects works on the website

First, let me credit the plugin author Jason Brown for this beautiful plugin. You can visit his official website here.

jQuery Snowfall is a lightweight plugin and incredibly easy to add or remove from your website. This plugin comes in both JavaScript & jQuery versions. With this plugin, you can customize snowflakes color, speed, shadows and even collect the snow on a container.

Steps to add snow effect with JavaScript

I am assuming that your web page is ready with some content. If not, don’t worry; it will work on a web page with minimal content.

Attach snowfall.min.js javascript file in your document.

<script type="text/javascript" src="snowfall.min.js"></script>

Start and stop JavaScript snowfall effect

To start the snowfall, you need to is invoke the JavaScript Snowfall class on your web page. There are a few ways to call the snowfall either you could do it directly or through passing the selector.

You can either attach it to the body tag like this snowFall.snow(document.getElementsByTagName("body"), {options}); or use var elements = document.getElementsByClassName('yourclass'); snowFall.snow(elements, {options}); whichever preference you want.

But for the sake of simplicity, I have used the first one, i.e., tying the event on the document body.

<script type="text/javascript">
snowFall.snow(document.body);
</script>

If you want to clear the snowfall effect with JavaScript on your web page, you need to use this function snowFall.snow(document.body, "clear");

In my demo script, I added a button that, upon clicking the button, will clear the snow effect in javascript.

<input type="button" id="clear" value="Click to clear"/>

<script type="text/javascript">
document.getElementById("clear").addEventListener("click", function () {
     snowFall.snow(document.body, "clear");
});
</script>

Add snow effect with JavaScript to a specific container

If you want to display the JavaScript snowfall effect on a particular element or a container, you can use this snippet var elements = document.getElementsByClassName('yourclass or ID'); snowFall.snow(elements, {options});

In my demo, I have added a container in which the snowfall effect takes place, and upon click event, you can start and stop the snowfall effect. You can style the div as per your preference.

<div class="test-container" style="position:relative; width:50%; height:200px;border:1px solid #ff0;"></div>

<script type="text/javascript">
var testContainer = document.querySelector('.test-container'),
				testContainerIsSnowing = true;

snowFall.snow(testContainer);

testContainer.addEventListener('click', function (e) {
	testContainerIsSnowing = !testContainerIsSnowing;

	if (!testContainerIsSnowing) {
		snowFall.snow(testContainer, "clear");
	} else {
		snowFall.snow(testContainer, {flakeColor:'#ff0'});
	}
});
</script>

Customizing the JavaScript snowflakes

Using this JavaScript snowfall plugin, you can customize the snowflakes as well. You can change the color of the snowflakes, make them round, add shadows and rounded shadows, and even replace the JavaScript Snowflakes with an image.

To demonstrate all the different options in my demo, I have created buttons for each one.

<input type="button" id="round" value="Rounded"/>
<input type="button" id="shadows" value="Shadows"/>
<input type="button" id="roundshadows" value="Rounded Shadows"/>
<input type="button" id="imgbut" value="Images"/>

When users click on any of the buttons, they will see customized snowflakes on the webpage. The code to customize the snowflakes is given below. All the buttons will respond on click event.

<script type="text/javascript">
document.getElementById("round").addEventListener("click", function () {
	snowFall.snow(document.body, "clear");
	snowFall.snow(document.body, {round: true, minSize: 5, maxSize: 8});
});

document.getElementById("shadows").addEventListener("click", function () {
	snowFall.snow(document.body, "clear");
	snowFall.snow(document.body, {shadow: true, flakeCount: 200});
});

document.getElementById("roundshadows").addEventListener("click", function () {
	snowFall.snow(document.body, "clear");
	snowFall.snow(document.body, {round: true, shadow: true, minSize: 5, maxSize: 8});
});

document.getElementById("imgbut").addEventListener("click", function () {
	snowFall.snow(document.body, "clear");
	snowFall.snow(document.body, {image: "flake.png", minSize: 10, maxSize: 32});
});
</script>

Documentation: setting on JavaScript snowfall Plugin

You can customize as many options in this JavaScript snowfall plugin to give you a more personalized snow effect with JavaScript on your website. The default options with values are listed below.

Settings Value
flakeCount 35
flakeCount 35
flakeColor ffffff
flakePosition absolute
flakeIndex 999999
minSize 1
maxSize 2
minSpeed 1
maxSpeed 5
round false
shadow false
collection false
collectionHeight 40
deviceorientation false

Steps to add snow effect with jQuery

If you are a jQuery person like me, you should opt for this technique to add snow effect with jQuery on your website.

Firstly, attach the snowfall.jquery.min.js javascript file in your document.

<script type="text/javascript" src="snowfall.jquery.min.js"></script>

When the document is ready call the snowfall method.

<script type="text/javascript">
$(document).ready(function () {
	$(document).snowfall();
});
</script>

All you have to do is call the snowfall method to give you a more personalized look and feel.

<script type="text/javascript">
$(document).ready(function () {
	$(document).snowfall({
		flakeCount: 150, // number
		flakeColor: '#fff', // string
		flakeIndex: 999999, // number
		minSize: 1, // number
		maxSize: 3, // number
		minSpeed: 2, // number
		maxSpeed: 10, // number
		round: true, // bool
		shadow: false, // bool
		collection: '.collectonme'
	});
});
</script>

How to replace snowflakes with image

You can replace the snow particle with any image of your choice. All you have to do is replace the name of the image in the image options $(document).snowfall({image :"flake.png", minSize: 10, maxSize:32});

In my demo, I have added a button upon clicking, and it replaces the default snowflakes with an image.

<script type='text/javascript'>
$("#imgbut").click(function () {
	$(document).snowfall('clear');
	$(document).snowfall({image :"flake.png", minSize: 10, maxSize:32});
});
</script>

How to collect the snowflakes on a container?

Like the snow collected on the rooftop, you can use the collection feature in this JavaScript snowfall plugin. Add a container or section on which the snowflakes will be collected.

<!-- you can use any CSS style of your choice  -->
<div class="collectonme" style="padding: 10px;background: #ddd;width: 50%;">Collecting snow here!</div>

Once the container is set up, add this JavaScript code at the bottom of your web page. The vital setting to look out for is the collection in which you assign the container class or ID.

<script type='text/javascript'> 
$(document).ready(function(){ 
	$(document).snowfall('clear'); 
	$('.collectonme').show(); 
	$(document).snowfall({collection : '.collectonme', flakeCount : 250}); 
}); 
</script>

Conclusion

Adding this snow effect with JavaScript is about a five-minute job. It will provide a rich user experience on your website.

Alternatively, with the new year around the corner, you should also try to integrate this fantastic JavaScript fireworks on your site as well.

View Demo

Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

shivasurya on

wow thats amazing bro!

Reply
Peter Kambey on

that’s a wonderful effect.. thank you Shahrukh

Reply
tsymbal on

Nice effect.
I want to offer another powerful jquery snowfall plug-in http://sneg.tsymbal.su/

Reply
Saurabh Kr Singh on

well explained and demo is awesome.

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.