Create snowfall effect using jquery

by  
Share:
Create snowfall effect using jquery

It’s Christmas time folks, and speaking of Christmas how can we not think about snowfall. We all love snowfall and in this tutorial I am going to demonstrate how to create snowfall effect using jquery. So this Christmas give your website a cool snowfall effect. I liked it so much that I have added it to my website too.

View Demo

What is this snowfall effect jquery plugin?

Let me first give credits to the plugin author Jason Brown for this beautiful plugin. You can visit the official webiste for this plugin here. I have also posted a tutorial to create fireworks using JavaScript which is a must see if you like this kind of effects. The snowfall effect is displayed using the power feature of jquery. It’s a very lightweight plugin and very easy to add or remove from your website.

 

Steps to add snowfall effect in your website

So you are all set to add this plugin to your website. Then follow this 3 steps:

Step1: Add the latest jquery library to your page.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Step2: Add snowfall javascript file.
<script src='snowfall.jquery.js'></script>

Step3: Add this script only after performing both step1 and step2.
<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
	}
	);
});
</script>

How can you stop the snowfall effect?

Yes you can stop the snowfall effect with an event. Take a look at the code below.

<input type="button" id="clear" value="Click to clear"/>
<script type='text/javascript'> 	
$(document).ready(function(){
 $("#clear").click(function(){
    $(document).snowfall('clear'); 
 }); 
});
</script>

How can you replace default snow particle with image?

You can replace the snow particle with some image. Take a look at the code below.

<input type="button" id="imgbut" value="Images"/>
<script type='text/javascript'> 	
$(document).ready(function(){
  $(document).snowfall('clear');
  $(document).snowfall({image :"images/flake.png", minSize: 10, maxSize:32});
});
</script>

How can you collect the snow on a container?

This is an awesome feature of snowfall plugin. You can add a container on which the snowfall will be collected. Just like snow collected on your rooftop.

<div class="collectonme">
		<p>Collect on meeeeee!!!</p>
</div>

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

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.

I hope you will like this awesome snowfall effect. Wishing you and your family “Merry Christmas”.

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.