Repo on Github
Download Jquery Snowfall 1.6
View the plugin in action
You can now use images for snowflakes!
// jQuery vs
$(document).snowfall({image :"images/flake.png", minSize: 10, maxSize:32});
// purejs vs
snowFall.snow(document.body, {image : "images/flake.png", minSize: 10, maxSize:32});
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
round : false, // bool
shadow : false, // bool
collection : 'element' // string
};
Example
Pingback: jQuery Snowfall 1.5 update now with snow buildup! | Somethinghitme
Can’t get images to work, seems to be just white squares when I try to use images.
Nice plugin though.
greatttttt!!! project,thx xD
hi, wonderful job but i have a serious issue,
images for snowflakes don’t work on firefox at all, can you help me please???
thanks alot anyway!
it seem thath firefox have some problems with z index and don’t show imagez for snowflakes,
sorry for bad my english speaking
On chrome this is a flake’s img tag
On firefox is like this
it don’t have the src:” ” method… why? how can i fix it, please help me!
actually i find this solution to show image-flakes on firefox
image{background:url(images/flake.png); background-size:100%;}
How to use image – fix on FF and Opera chrome safari ie
1.Open snowfall.jquery.js
2. find it
var flakeMarkup = null;
if(options.image){ flakeMarkup = $(document.createElement(“image”));
flakeMarkup[0].src = options.image;
}else{
3.change it!
(“image”)); ——> (“img”));
var flakeMarkup = null;
if(options.image){ flakeMarkup = $(document.createElement(“img”));
flakeMarkup[0].src = options.image;
}else{
I am using e107 CMS and I cannot get this to work. I put the files in the root directory. I have no idea in what file and where to place $(document).snowfall(); to get it to work. Anyone mind helping me out?
Pingback: Laat het sneeuwen op je website met deze gratis jQuery plugins | Pixelmountain - Pixelmountain is een designblog, met focus op webdesign en web development, creative photoshop tutorials voor je website, inspiratie en showcases op het web, en moderne desig
Hi Jason,
First of all, nice plugin, thanks for sharing! One thing that could be improved (IMHO) is how the snow collects. If you use round snowflakes which are bit bigger (e.g. 8 px) the collected snow seems to be made out of blocks. Check out the screenshot below for an example of what I mean:
http://awesomescreenshot.com/0afqsaj74
Hey Bas, yeah the snow collection is just done with blocks, I need to rewrite the collection portion Im not really a fan in how it works overall. Im thinking it would be better to have a canvas element over the whole page and just use canvas snow so any type/size could collect. Only problem is it would alienate older browsers.
Hey i am newbie so don’t know that much about this stuff.I just need to know whether this will work on asp.net website.If yes can you post the steps for it.I m using vs2008.
thanks
Hi,
great script. Just wondering if there’s a way you can make the snow flakes fade on and off rather than just appearing and disappearing abruptly? Or at least fade off? Or a way of extending the time they are on screen for before they are cleared?
Thanks!
Can i hide a certain image from all the images floating on the screen ?