Plugin has been updated to 1.4 please go here for more up to date information
*Updated* fixed a bug, and added an example file to show how to use the plugin.
Added a few new things to the Jquery snowfall plugin, you now have the ability to clear the snow from elements, chaining is supported, and element matching is supported. Its funny today was the hottest day of the year so far and I decided to work on a script to make it snow.
Download Jquery Snowfall 1.3.1
Invoking the snow
$(document).snowfall();
$('#elementid').snowfall({flakeCount : 100, maxSpeed : 10});
$('.class').snowfall({flakeCount : 100, maxSpeed : 10});
Snowfall Methods
// stopping the snow
$(document).snowfall('clear');
$('#elementid').snowfall('clear');
$('.class').snowfall('clear');
Options currently supported with default values
options = {
flakeCount : 35, // number
flakeColor : '#ffffff', // string
flakeIndex: 999999, // number
minSize : 1, // number
maxSize : 3, // number
minSpeed : 2, // number
maxSpeed : 3 // number
};
Example
Pingback: Jquery Snowfall Plugin 1.3 « Somethinghitme | Source code bank
Doesn’t work.
Should be working now, didnt include the file or jquery with the theme update.
I also am having issues. :/
…Would it be possible for you to ship an index.html example with the zip possibly?
Great function!
I’d like to suggest the following change:
In order to get snow on element padding I’ve changed:
$(element).height() to $(element).outerHeight()
and
$(element).weight() to $(element).outerWidth()
in lines 104, 105, 110 and 111
@Adam Ill zip it up with an example file.
@Han ill incorporate those changes.
I notice you use document.ready in the example on this page. Is that the key to getting this to work when targeting a specific ID or class?
Paul, yes there needs to be a document ready first, to ensure everything has loaded, Ill include an example and post it tonight.
Wow. Fantastic script. One of the best and least tacky ones I’ve seen. Thanks very much
Pingback: Jquery Snowfall script updated | Somethinghitme
Updated to include Han Bongers changes (thanks) fixed a bug, and included an example file for usage.
Hi, the download example no works ! Please update the download file snowfall.min.jquery.js
to http://www.somethinghitme.com/wp-content/themes/somethinghitme/js/snowfall.min.jquery.js, < this file works !
Alright I updated it, its fixed now, had to remove outerheight, and outerwidth as they seem to be having issues if the plugin is called on the whole document. Ill have to work on that some more later on.
Useful plugin! It would be nice to be able to remove the elements after a certain ammount of time, to stop them falling forever?
You can clear the elements its snowing on after a while, I updated the zip and it includes an example of how to stop it from snowing after 5 seconds.
Hi,
possible insert image in this script? Flakes change with my images
I like it, nice work. I did a much simpler snow effect for my js1k xmas submission: http://js1kave.skilldrick.co.uk/
The snow takes up about a quarter of the bytes, and about 95% of the processor
(Press space to go up btw)
That is friggin awesome! Im working on mine currently.. but its not nearly as cool. Thanks for posting press space btw.. i tried arrows, w, a I almost gave up trying.
Pingback: jQuery Roundup | tips & tricks
Hey Jason… I’ve seen this script at work and it’s awesome… unfortunately I cant get it to work on my site, I’m quite a newbie at website design… I’ve set another snow script up in my site but I’d rather use yours… ehmmm. I dunno, can you have a look at my site and give me a hand, I’d really appreciate it!
thanks a lot
Sent you an email
Brilliant piece of code. However, when I use it on a webpage that ‘slideshows images’ using Jquery Cycle (http://jquery.malsup.com/cycle/), the slideshow no longer appears.
Any ideas where they might be clashing?
@Darkhorse Ill look into that and see if I can figure out why its doing that.
Hi there, trying to get this put onto our site….
Do you have any instructions… SORRY!
Much Appreciated.
Darshan Solanki
@Darshan Solanki if you download the .zip theres a file in there called index.html which has everything you need to get started. Main things you have to do is make sure to have Jquery included on your site, and you can just call $(document).snowfall();
Fantastic script. Thanks very much.
Hey man. First off, I want to say that this is a great little creation that you made. All the other snow jquery plugins that I’ve come across are extremely tacky. Yours on the other hand, is simple and looks very clean. I dig it.
One thing I noticed though is that when I’m calling the function like this: $(document).snowfall(‘clear’); , the snow stretches the width of the page and the width scroll bar fluctuates back and forth.
Thanks for the compliment, thats why I made it I didn’t want huge images falling everywhere. I remember that issue from last year actually.. someone had a solution Ill have to look for it something to do with the exact size of padding required. Ill find the fix and update it.
A little suggestion that I worked out is to use CSS 3 – with a border-radius of similar size to your minimum size of flake. This will “round” the design and therefore look more pleasant in my view. You can add this even for IE browsers using a useful little script you can find here http://www.fetchak.com/ie-css3/
And thanks for this addition to some seasonal web design! In Glasgow it is exactly like this right now so it is very welcome
Using it on our business website until the weather changes! Great script and Merry Christmas.
@Luke wow that looks really nice! I will add an option for rounded flakes now. Thanks for that, looks even more clean in my opinion.
@Adam, I got an error on your page in relation to $(‘#gallery3 a’).lightBox(); “Uncaught TypeError: Object # has no method ‘lightBox’” I dont know if thats whats halting the whole thing, but thats seems to be the only page with that error.
This is such a great plugin, all the others look terrible and are slow but this one is really nice.
I’m just having a problem with it on my homepage for some reason, it just doesn’t load but for every other page it works just fine. Is it because there is a php redirect at the start of the code for the index.php page? All the other jquery and scripts work fine too it’s just the snow that isn’t falling.
Thank you very much for this Plugin! I adapted it a little bit cause i needed the flakes go from bottom to the top
Great script! Thanks for sharing!
You may have already commented somewhere on this, but is there a fix for IE6. It doesn’t seem to work!! Thanks.
Message in IE…
Internet Explorer cannot open the internet site…
Operation aborted
any wordpress plugins ??? i have a wordpress blog , for christmas i want this javascript any buddy could help me out ..
very helpful. Thanks for Share
Thank you…. the snows are worked….!!!
$(document).ready(function(){
$(document).snowfall({flakeColor: ‘silver’, maxSize: 6, flakeCount: 35});
});
I using:
$(document).ready(function(){
$(document).snowfall({flakeColor: ‘silver’, maxSize: 6, flakeCount: 100});
});
awesome function man…! just what i need, thank you for sharing. can i a little bit suggest a bug fix in next version ? when i use fullscreen on my ff8 the snow wont falling down. that’s all
Pingback: snowfall.jquery.jsで、サイト内に雪や羽を降らせる