Hi,
I'm using the Jenkins wall display plugin which has a 'christmas' theme that displays snowflakes using JQuery-Snowfall. Everything works fine until the window is resized.

The size calculation sets the height to 0, which stops the snowflakes from being painted as expected. The log in the console says "0".

It looks like the binding to the $(window) does give the wrong value when the plugin is initialised with the $(document).snowfall({..})

$(window).bind("resize", function(){
elHeight = $(element)[0].clientHeight;
elWidth = $(element)[0].offsetWidth;
console.log(elHeight);
});

Is this something you have seen before?
Thanks for the plugin,
Simon

Line 4 in examples/index.html
Links to ../bower_components/jquery/dist/jquery.min.js
No such file exists

Two things:

1. canvas id or calss
Would be cool to have an id or class on canvas tag

2. remove canvas on "clear"
on call $(document).snowfall('clear'); it doesn't remove canvas tag

It would be great if random snow flakes rotated as they fell.

Hi, how much work will it be to add a direction attribute so instead of falling top down going bottom up so I can use it with a bubble image?

Thanks

Hi,

I encountered an issue when combinig multiple options in combination with the new 'collection' option. You can provoke an "Uncaught TypeError" in your example using this call

There seems to be something wrong on calculating "curX" on line 117 when using own sizes

It would be great to have an option to exclude mobile devices (would be nicer to their cpu and batteries).
If anyone is interested: Check out this commit on my fork:
bombcheck@7aba203

Is there an easy way to add multiple images to the snow fall effect with an array within the image object?

Having multiple snowfalls doesn't work, I'm guessing this is because of duplicate ID's on the flakes is there a work around? or fix?

Hello. First of all, thank you for this plugin. I've been using since 2014 on my blog. But now i redesign my theme and i don't want to use big jquery core just for this plugin. As a javascript noob, i purified this plugin from jquery but i removed some features. Like shadow or device orientation. I am hoping this will be a guide to who want to use without jquery.
It will be allways round, no shadow, no image. It based on Version 1.51 Dec 2nd 2012.

https://github.com/muratcesmecioglu/LetItSnow.JS

I have implemented your snowfall plugin in few of our pages that have scroll bar. I implemented the plugin by using snowfall.js file and one line code below:

snowFall.snow(document.body, {round : true, minSize: 4, maxSize:7, flakeCount:50});

The issue is snow falls only up to 75% of the screen(not the page). But snow starts falling up to the bottom of the page once we change browser window size and if we restore it to original size, it keeps falling to the bottom.

If the page is refreshed, snow again falls only up to 75% of the screen.

Can you please suggest me a solution?

Can you add jquery-snowfall to cdnjs ?
https://github.com/cdnjs/cdnjs
https://cdnjs.com/

If you use it with jquery backstretch you get the bug that snow is only falling on 1px height at the top.

Solution:

-Enclose your website in another div (e.g. #snow)
-update your div width and height (to match window size) if window resizes and when page loads.
-apply snow effect on that id (e.g. $('#snow').snowfall();)

Does it work with jquery version 1?

the demo uses version 2 of jquery and i cannot seem to get it to work on jquery version 1.11.3

I see the snow, just not the animation and fall

Hi I needed a effect of different opacity on each flake and i made it, but will be useful if you add it as an options in the plugin:
{ minOpacity: 0.2, maxOpacity:1 }

I do it with css:

.snowfall-flakes:nth-child(even) { opacity:0.5; }
.snowfall-flakes:nth-child(3n) { opacity:0.8; }
.snowfall-flakes:nth-child(4n) { opacity:0.2; }
.snowfall-flakes:nth-child(10n) { opacity:0.1; }

Thank you for developing this plugin.

we added this plugin to our site and it killed FF8 even on high performance machines. updating the snow function fixed that

        function snow(){
            for(var i = flakes.length-1 ; i>=0 ; i--){
                flakes[i].update();
            }
            snowTimeout = setTimeout(function(){snow()}, 50);
        }

longer timeout and cache the flakes array length

Hello,
I'm trying to add the snow but there is this error: http://puu.sh/ds1Oe/60baa97cf5.png
I included the snowfall.jquery.js script then this is the code that enable it:

Hello,
on ie10 - win 8 the flakes have some moving frames/borders:

http://alturl.com/tsrbo

How can i fix this? Have you tested it on ie10?

greets

Example with images makes scrollbar flashes from time to time. I think it could help prevent it.
CSS:
body {overflow:hidden;}

After a while runing the script safari close with no error in debug panel.

Hi,

Would it be possible to add an API to stop the snowfall after n seconds?

I'd like to show them for e. g. 5 seconds but then stop, ideally with a fade out event but more importantly so just to have it stop after n seconds.

Thanks for this usefull extension! The most other don't support images. In this case I have adapted your script for my needs to support more then one image and think it can be useful:

search:

                if(options.image){
                    flakeMarkup = $(document.createElement("img"));
                    flakeMarkup[0].src = options.image;
                }

replace:

                if(options.image){
                    flakeMarkup = $(document.createElement("img"));
                    flakeMarkup[0].src = options.image;
                }else if(options.images){
                    flakeMarkup = $(document.createElement("img"));
                    flakeMarkup
                        .hide()
                        .attr('src', options.images[random(0, options.images.length - 1)])
                        .load(function() {  
                            $(this).fadeIn();  
                        });
                }

Error returned from the un-minified version:

SCRIPT5009: 'requestAnimationFrame' is undefined
snowfall.jquery.js, line 305 character 17

Can be poly-filled so maybe a mention is the readme would be sufficient.

Hi,

Great plugin! The only flaw I've found is that the images don't work in Firefox v24.0

Jquery, Bootstrap, custom jscripts = not working?

Anyone can try to debug it for me?
http://judicial-corruption-australia.tk/index.php

i see the snow but no motion

Hi!
When i use the plugin and watch it on an ipad, it seems that it doesn't take in to account it the device is Landscape or Portrait. On landscape the Snow goes to one side in a sharp angle.

Tested in Safari on iOS 8.1.
Would really love a fix for this!

one page error this bug

Uncaught TypeError: Cannot read property 'x' of undefined b.snowfall.updatesnowfall.min.jquery.js:34 psnowfall.min.jquery.js:57 b.snowfallsnowfall.min.jquery.js:124 (anonymous function)snowfall.min.jquery.js:133 e.extend.eachjquery.pack.js:3 e.fn.e.eachjquery.pack.js:3 b.fn.snowfallsnowfall.min.jquery.js:132 (anonymous function)posting.php:36 f.extend._Deferred.e.resolveWithjquery.pack.js:3 e.extend.readyjquery.pack.js:3 c.addEventListener.C

if (d.collection && this.x > this.target.x && this.x < this.target.width + this.target.x && this.y > this.target.y && this.y < this.target.height + this.target.y) {

Shake your smartphone and it is a snow globe!

https://github.com/tomgco/gyro.js

If the loading of the snowflake image takes a long time, empty placeholders can be seen, what looks very ugly!
Please insert following 2 lines of code after line 140 (jQuery variant):
$(flakeMarkup).css('display','none'); // Only show the snowflake after the image has been loaded
flakeMarkup.onload = function () {$(flakeMarkup).css('display','block');};

It is much better for moving objects to use transform: translate(x, y) instead of absolute positioning with top & left, because changing the top and left attributes it needs Chrome to process 3 operations:

1. It have to process the layout, because top/left may affect other elements on the page
2. Damaged Pixels have to be repainted
3. The Composition has changed so it has to calculate over this step too

A much better choice is to use the transform attribute instead, because this attribute doesn't affect other elements and so no pixels can be damaged and you only have to change your Composition.

It would be a great enhancement.
I saw pages using your Plugin and forced them to FPS under 30 and sometimes 20.

I hope I could help you!

For more information:
http://csstriggers.com/#top
http://csstriggers.com/#transform

See #21
I haven't experienced this on my computer, but two of my co-workers that I had test it did experience it in both Chrome and Safari. I checked our versions of Chrome and they're the same, so I'm not sure why they experienced it while I didn't.

When I changed the window size,the snow will show in a line.

AWESOME plugin u have here :)
I have a problem, when loading this, on a class which is used by some AJAX appended HTML, all snow is rendered at the top

There is an error in the offset of the collection canvas if you hava a page that is longer then the screen size so that scroll bar are activated and you make a page refresh when the scroll bar is not at the top position. I can reproduce this problem on your test index.html page with FF17. Strangely its seems to work on IE9 with your test page but I have the issue when I use your script on other sites.

In my opinion the problem is related to the getBoundingClientRect() that return the coordinates given relative to window and not to the document. Maybe there is a smarter way to fix this but I've corrected the script in this way:

Adding this function:

function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()
    var body = document.body
    var docElem = document.documentElement
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0
    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft
    return { top: Math.round(top), left: Math.round(left), width: box.width }
}

and using this instead of elements[i].getBoundingClientRect():

var bounds = getOffsetRect(elements[i])

Hope this help!

The 'main' property in bower.json should point to the .js file and not index.html.

This allows build tools to reference the file directly (e.g https://github.com/taptapship/wiredep).

Hi --

I am using this and snowfall is working great:

$(document).snowfall({collection : '.note'});

However, the collection doesn't seem to work. I've confirmed that .note exists and caps is correct.

Is there something I'm doing wrong? Love this code btw

EDIT: I tried adding an ID, and adding by ID '#note' didn't work. Snow works, but not collection :/

Currently, flakes fall from top to bottom:

Since you can customize the color which opened imagination beyond snowfall, it would be cool to have it go towards a certain direction -- or to be minimalist, just go opposite direction (from down to up).

You can make the flakes red and have an "ember" sort of effect, or many other creative possibilities.

I have noticed that the simple snowflakes effect eats up to 25% of CPU in chrome with default settings in the demo.

With 100 flakes it get's up to 40-50%.

This behaviour might not be ideal for laptop and mobile users as it might unnecessarily drain the battery.

Hey, maintainer(s) of loktar00/JQuery-Snowfall!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library loktar00/JQuery-Snowfall is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "loktar00/JQuery-Snowfall",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

When I use snowfall.min.jquery.js the snow flakes appear in one line, but don't move. If use snowfall.jquery.js instead everything works fine. So I guess there is something wrong with the minify process.

In my case, the snow falls only up to 75% of the height of a screen(please note not the page). The webpage's length is almost double of a normal visible height.

Surprisingly, snow starts falling to the bottom of the page, if the browser window is re-sized.

How can I solve this?

I am making a website for our customers as a job at the company.
I would like to use "snowfall.js" for commercial purposes.
There is no description about the license at README, is it okay to use it?

I tested this plugin. It doesn't work on safari

No movement

Odd issue, it can't just be me (!?) the snowflake images weren't rendering for me in FF 17 on Windows.. I resolved by changing:

flakeMarkup = $(document.createElement("image"));

to

flakeMarkup = $(document.createElement("img"));

This is for the jQuery version - though the pure JS version had the same issue. It seemed FF was rendering each snowflake as a literal 'image' element instead of 'img'.. hope this helps anyone with the same issue :)