jSnow, a jQuery plugin for creating falling snow effect on your website

Sun, 13/12/2009 - 14:59 — DuMmWiaM

jSnow, is a jQuery plug-in that adds falling snow effect to your website (using javascript), a very common decorative effect that every website needs for Christmas! jSnow is lightweight (2.6kb), doesn't require any external files to run (css or images) and it's very easy to use! Besides the small footprint, jSnow offers various other unique features like:

The falling snow effect, follows you as you scroll vertically along the page.
jSnow 1.1 seamlessly supports images, characters and HTML special characters.
No use of external files (CSS) or images, you just use "jsnow.js" file.
Numerous versatile parameters, that are easy to use and change the whole effect.

Download jSnow v1.2 with examples! View jSnow v1.2 example!

Installation

In order jSnow to work you need the jQuery library (version 1.2+, 1.3+) and the javascript file (.js) of the jSnow! Once you have them both, link them inside the head of your html file in the following order:

<script type="text/javascript" src"folderName/jQuery.js"> </script>
<script type="text/javascript" src="folderName/jSnow.js"> </script>

don't forget to replace "folderName" with the folder that you've stored the two ".js" files.

Compatibility

jSnow has been is compatible with all the following browsers:

Internet Explorer 6+
Mozilla Firefox 2+
Opera 9+
Safari
Google Chrome

Usage

jSnow is very easy to use, all you have to do (besides the installation part, see above) is run the following command:

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

There is nothing wrong with the code in line 3, you don't have to declare any DOM element, jSnow works automatically. Probably in next versions, I will add support for multiples DOM elements.
For best results (for the snow to fall tothe whole width of the window/page) you must ensure in your CSS, that <html> and <body> have the same width. In case you don't and you have something like that...
body {width:960px;margin:0 auto;}
jSnow will not work properly. If you are faced with this situation, just create an div element with an unique id and place exactly after <body>. For example:
<body><div id="THE_BODY">...rest of html code...</div></html>
and then place the CSS rule you to the new div:
#THE_BODY {width:960px;margin:0 auto;}
if you are wandering am I putting to all this trouble, it's because I haven't found a way (yet) to append DOM elements directly to <html> tag in IE 6 & IE7. I've spend hours and hours of reading and searching, but I found nothing! If I want to add dynamic DOM content to a document I must do it in <body> tag, not <html>. All other browsers, work fine with appending DOM elements directly to <html>, but I had to make this sucrfice in order for jSnow to be compatible with the IE6 and IE7. If anyone knows a way of adding DOM elements directly to <html> (not <body>)...I beg him to teach me :)

jSnow Parameters

jSnow can take the following parameters.

flakes: [number] default : 30
The number of "flake" items that will be displayed on the screen. Don't over do it because (100+) some browsers can't handle so many animating on the screen. I suggest staying between 15 and 40...but that's your call.
flakeCode: [array] default : ["•"]
This parameter determines the graphic of the snow flake. By default jSnow adds the HTML special characters •(•) but you can use ANY text character, HTML special character or even IMAGES (gif and png only). Moreover instead of placing one graphic for snow flake, you can place any number of IMAGES or HTML characters, separated by comma. In case you want to add an image, you should set the relative or absolute path for every image in respect with the document. For example if you wanted to snow all single digit numbers, you should pass the parameter as follows: flakeCode: ["0","1","2","3","4","5","6","7","8","9"].
flakeColor: [array] default : ["#fff;"]
This parameter determines the color of the snow flakes. The code is written in hexademical notation (#RGB, CSS style). Default color for snowflake is white, with no random variations. In case you need variety (or because your page is white and the snow flakes don't show up) you can change the value to anything you like. For instance if you want the snow flakes to have red, green or blue color, the parameter that you should pass is: flakeColor:["#f00","#0f0","#00f"].
This parameter is ignored for images.
flakeMaxSize: [number] default : 20
The maximum number in pixels, that determines the size of the snow flake.
This parameter is ignored for images.
flakeMinSize: [number] default: 10
The minimum number in pixels, that determines the size of the snow flake. So technically every snowflake's size is between 10 and 20. If you don't want your snowflakes to have a random number, pas the same value to flakeMaxSize and flakeMinSize.
This parameter is ignored for images.
fallingSpeedMax: [number] default: 3
The maximum speed that a snow flake will fall. Counted in pixels per itteration.
fallingSpeedMin: [number] default: 1
The minimum speed that a snow flake will fall. Counted in pixels per itteration. The default settings are for something normal and lazy. If you want something faster (snow storm :P) increase both values. If you play with the values here you can get very interesting effects :). For example, if you put 0 in both fallingSpeedMin and fallingSpeedMax...there is NO snow effect, it's like being in the bottom of the sea and you can see the bubbles moving left-right....and even better if you put negative numbers the animation will go upwards (LOL, unfortunately it will only works once :P)! I thing I will investigate these interesting animation effects in future versions!
swingMin: [number] default: 0
The minimum swing range in pixels, see swingMin bellow for more details.
swingMax: [number] default: 200
The maximum swinging range for the falling snowflakes.By default each snowflake while falling it moves from -100 pixels to +100 from the center of the fall (in the x axis). By changing either the swingMax or swingMin value, you affect the swinging in the x axis.Adjust by trial and error :)
zIndex: [number] default: "auto"
In case you are using z-index in your CSS and snow flakes hide behind DOM elements, you should start playing with this parameter. Take a note that IE6 and IE7 don't play nicely with z-index!
interval: [number] default: 60
With this parameter you can controlo the animation circle of jSnow. The animation in jSnow, is made with the setInterval command, so if you understand that you can adjust the interval according the performance that you want! I've used it with a value as a low as 20 (executing the animation script 50 times per second) and it worked smoothly.
kill(): function
This is not a parameter but a "kill" switch for the jSnow plugin. It is very useful if you want to give to users the option to control (or toggle) the effect. See this example to understand how to use it.

Examples

Example A: Simple Usage.

No tricks just simple white falling snow!

jQuery CODE:
$().jSnow();

Example B: Deck card symbols random colored, with fixed size

In case you want something different and more colorful...

jQuery CODE:
$().jSnow({flakeCode:["♠","♥","♣","♦"],flakeColor:["#f00","#0f0","#00f"],flakeMaxSize:20,flakeMinSize:20});

Example C: Use a mix of images and html special characters

You can create snow flakes with just one element (image, character or HTML character) or any kind of mixture.

jQuery CODE:
$().jSnow({flakeCode:["•","path/to/image_file/file_name.gif"]});

ChangeLog

12 DEC 2009: version 1.0 released, merry XMas everybody.
20 DEC 2009: version 1.1 released, thank god I managed to finish before santa shows up!
1. Added support for png and gif images. There is no point in support jpg files since they have no transparency!
2. You can mix html code and images for random snowflakes, no need to feel limited you can create any combination HTML flakes, image snowflakes or both :)
3. Improved animation speed, jSnow is now a lot faster and smoother.
4. Added new parameter zIndex in order to control the zIndex positioning of snowflakes! Ofcourse IE6 and IE7 was there to make my life harder, with the famous z-index bug. At least Microsoft fixed that in IE8.
5. Added new parameter: interval to control the animation loop. The animation has been heavily optimized, but I felt that someone will need to optimized the whole experience.
6. Managed to keep the file size small, since I did a lot of optimization to the code.
7. Fixed numerous bugs...I am so butterfingered :).
29 DEC 2009: version 1.2 released.
1. Fixed the bug in IE6 that didn't scroll.
2. Added two new parameters swingMin and swingMax.
3. Added a kill() function that destroys jSnow.

License

jSnow is released under GPL Open Source Licenses...thus it is completely and totally free!. You are obligated to keep all credits (links, names etc) and if you feel like it...a link to this page will be appreciated!

Comments

Mon, 14/12/2009 - 19:38 — Matthew Maxwell (not verified)

Do you have the unpacked

Do you have the unpacked source for this?

Wed, 23/12/2009 - 04:51 — Anonymous (not verified)

You can unpack any packed

You can unpack any packed javascript (including this one) if you want the source. See: http://yaisb.blogspot.com/2006/10/defeating-dean-edwards-javascript.html

Mon, 14/12/2009 - 23:41 — DuMmWiaM

Sure...

I am working on an update. I will publish it with version 1.1

Tue, 15/12/2009 - 16:27 — infocyde (not verified)

I like

Thanks for sharing your plugin. I like it.

Fri, 18/12/2009 - 09:47 — oputz (not verified)

snow in a div

Hi, it is possible to let it snow only in a div-container instead whole page?

Fri, 18/12/2009 - 16:04 — DuMmWiaM

Not yet :0

Currently this feature is not supported...probably in version 1.3 will

Sat, 19/12/2009 - 14:57 — Anthor (not verified)

Corrections

You should had that on the onload, to take care of anchors : s.css('top', $("html").scrollTop() + "px"); And also resize the main container on resize. s.css({width: j + "px"}); Great plugin. Seems a little slow in comparaisons of others?

Sat, 19/12/2009 - 18:50 — DuMmWiaM

I am currently releasing v1.1

You should check it in a couple of days. I fixed a lot of bugs and issues that you one that you described. The problem with the animation is also fixed, since a) i increased the interval circle (plus parameter to control it) and b) I found out that 50 items moving on the screen with javascript is way too much, so the new default number of snowflakes is 30 (and it runs a lot better)!I have optimized the animation code, but with all the changes above it runs pretty smoothly.

Sun, 20/12/2009 - 22:10 — Eric (not verified)

Thanks for the snowflakes --

Thanks for the snowflakes -- can you add the unpacked js to the jSnow 1.1 zip? I'm learning jQuery and would love to see how you did it...

Mon, 21/12/2009 - 01:35 — DuMmWiaM

sure

will do :)

Mon, 21/12/2009 - 04:42 — The Melody Guy (not verified)

Problem

Hi! As you can see I have a little problem with this plug-in: http://www.giullariviaggiatori.tk/ When i put the animation code in my page the $(document).ready seems to be called a second time. I made something wrong? Thanks for your help and for your plug.

Mon, 21/12/2009 - 09:43 — DuMmWiaM

I can't find the problem

Can you please send me the code? I've seen that you are using some strange tricks with iframe maybe we should adjust the code.

Mon, 21/12/2009 - 15:36 — The Melody Guy (not verified)

Sorry. However the right url

Sorry. However the right url is www.giullari.altervista.org The real problem is that music starts two time just when jSnow code is written. If I remove that code everything runs correctly. The jQuery code is cleary written in html page code, but if can help us I can send you via e-mail all the package of jQuery I use in my site. Thank you.

Mon, 21/12/2009 - 17:56 — T (not verified)

Unpacked source

I'd like to make a couple of modifications to work better on my site, any chance you can upload the unpacked source soon? Thanks!

Mon, 21/12/2009 - 18:53 — DuMmWiaM

For faster service...

send me an email and I will send you the code.

Mon, 21/12/2009 - 20:15 — Jared (not verified)

It stops the page from scrolling

Not sure why but on my webpage it didn't work and stopped me from being able to scroll down the page. Any ideas of what I could look at to get this to work?

Mon, 21/12/2009 - 23:07 — DuMmWiaM

Download...

Download the versions that I've uploaded here the on in plugins.jquery.com has problems!

Wed, 23/12/2009 - 01:29 — Joe (not verified)

It's IE6 specific

I'm running into the scrolling issue when testing in IE6- the scrollbars are disabled when jSnow is running. In fact, if you look at the jSnow example page in IE6, the issue is demonstrated.

Tue, 22/12/2009 - 16:44 — subutux (not verified)

Is there any way ...

is there any way to disable jsnow ? I'd like to give my visitors the posibility to disable the snowy effect ( i't gets annoying after a while ;) ) ...

Wed, 23/12/2009 - 01:52 — DuMmWiaM

Yep...there will be!

In version 1.2, I will have a function to shut it down and turn it back on (probably used with some kind of toggle)

Wed, 23/12/2009 - 04:56 — Doug (not verified)

swingRange option...

It'd be really good to add swingRange as an option, instead of hard coding it as a random 0-200px value. I had to manually unpack and fix this to get it working for my site~ Lovely plugin tho. Nice work. :)

Wed, 23/12/2009 - 17:34 — DuMmWiaM

Version 1.2

I will implement it in version 1.2, i forgot to do it in version 1.1 :)

Sat, 26/12/2009 - 02:43 — Anonymous (not verified)

I like it!

Jsnow is running.Thx!

Sun, 27/12/2009 - 10:35 — jejazz (not verified)

scroll page doesn work

i tried to put jsnow on page and the scrolling of the page doesn't work. Any ideas why? I downloaded from here, tried everything and still... btw great plugin :)

Mon, 28/12/2009 - 00:50 — Margus (not verified)

You still need to add CSS rules

Without adding this rule: html,body {background:#000;position:relative;padding:0;margin:0;} It will not work correctly in FF. It will continue jumping the scroll on the page.

Mon, 28/12/2009 - 14:53 — DuMmWiaM

It depends...

I think it depends on the layout, I don't want to mess a lot with the CSS part and ruin the users theme. If I could I would remove all of my CSS injections, but due to browser incompatibility I can't.

Fri, 01/01/2010 - 05:34 — Eric (not verified)

easy way to unpack source

http://jsbeautifier.org/

Mon, 11/01/2010 - 20:02 — kapik (not verified)

Only within a div

Hi, I wish to this effect within a div only (and not the whole page). Is this possible ??

Fri, 22/01/2010 - 00:26 — Mr.K (not verified)

Very very nice

This is a great add on. We will be using it for our class website. It'll be done here pretty soon. The url is web-ctec.org We were thinking we wanted it to have different backgrounds and things for the different seasons. We though of snowflakes, did a quick google search, found your add on, and had it up and working in less than 5 minutes. Thank you so much. Incredible job. VERY cool effect.

Fri, 22/01/2010 - 16:24 — DuMmWiaM

I am glad :)

Glad that I helped you

Thu, 04/02/2010 - 23:37 — Mr.K (not verified)

Can't get it to turn off!!!!

Ok we're trying the whole kill thing and the snow won't turn off. It will with the toggle code you have on your site. But we have one link that turns it on and we need another link to turn it off. Is that possible? This is the code we used to get it to start which works fine: Snow This is the code we are using to try it to stop snowing: Stop Snow I've tried a ton of variations but do you have any idea how to get this to work? Thanks.

Thu, 04/02/2010 - 23:41 — Mr.K (not verified)

Umm ok that didn't work hopefully this will

Umm that last post just converted my code to junk so here it is (hopefully this will work)

Snow

This is the code we are using to try it to stop snowing:

Stop Snow

I've tried a ton of variations but do you have any idea how to get this to work? Thanks.

Thu, 04/02/2010 - 23:42 — Mr.K (not verified)

Ok this isn't working one more try

Here we go again: < a onclick="$().jSnow({flakes:35});" href="#"> Snow < / a > This is the code we are using to try it to stop snowing: < a onclick="$().jSnow().kill();" href="#"> Stop Snow < / a > I've tried a ton of variations but do you have any idea how to get this to work? Thanks.

Mon, 08/02/2010 - 04:20 — Lindarc20 (not verified)

Re

If make a choice to create the custom essays, you will have to remember that it involves a lot of work! Some men spoil their written essays, because they are not professionals! That’s sorrowful, but the essay order service can assist these people any time they need.

Wed, 03/03/2010 - 15:04 — piese auto (not verified)