loktar00 / jquery-snowfall

Makes it snow on any web page or specific element.

Snowfall jquery plugin

Live Demo

Install using bower install jquery-snowfall

Version 1.7.4

Bug fixes, removed requestAnimationFrame polyfill.

Updated to use gulpjs for build process.

Version 1.6 Dec 8th 2012

Added the ability to use images as snow flakes instead of just solid colored elements.

$(element).snowfall({image :"images/flake.png", minSize: 10, maxSize:32});

Pure version

snowFall.snow(elementCollection, {image : "images/flake.png", minSize: 10, maxSize:32});

elementCollection can be any valid element such as document.body

Version 1.5

Added collecting snow! Uses the canvas element to collect snow. In order to initialize snow collection use the following

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

element = any valid jquery selector.

The plugin then creates a canvas above every element that matches the selector, and collects the snow. If there are a varrying amount of elements the flakes get assigned a random one on start they will collide.

Version 1.4 Dec 8th 2010

Fixed issues (I hope) with scroll bars flickering due to snow going over the edge of the screen. Added round snowflakes via css, will not work for any version of IE. - Thanks to Luke Barker of http://www.infinite-eye.com/ Added shadows as an option via css again will not work with IE. The idea behind shadows, is to show flakes on lighter colored web sites - Thanks Yutt

Version 1.3.1 Nov 25th 2010

Updated script that caused flakes not to show at all if plugin was initialized with no options, also added the fixes that Han Bongers suggested

Developed by Jason Brown for any bugs or questions email me at loktar69@hotmail info on the plugin is located on Somethinghitme.com

values for snow options are

flakeCount,
flakeColor,
flakeIndex,
minSize,
maxSize,
minSpeed,
maxSpeed,
round, 		true or false, makes the snowflakes rounded if the browser supports it.
shadow		true or false, gives the snowflakes a shadow if the browser supports it.

Example Usage :

$(document).snowfall({flakeCount : 100, maxSpeed : 10});

-or-

$('#element').snowfall({flakeCount : 800, maxSpeed : 5, maxSize : 5});

-or with defaults-

$(document).snowfall();

• To clear -

$('#element').snowfall('clear');

jquery-snowfall's Issues

cdnjs

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

Can I use snowfall.js for commercial purposes?

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?

Snow Globe Effect

Shake your smartphone and it is a snow globe!

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

Jquery, Bootstrap, custom jscripts = not working?

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

crash safari ios 5

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

Only show image base snowflakes after the image has fully loaded

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');};

Feature request: rotation of images as they fall

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

The plugin doesn't work on safari

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

No movement

Does it work with jquery version 1?

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

ie10 Bug - Frames on Flakes

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

Bower config - 'main' property

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).

Window resize results in 0 height

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

canvas id + clear funtion

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

[Conflict] TypeError: Cannot read property 'x' of undefined

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) {

[enhancement] Add missing bower.json.

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!

Change Positioning from top/left to transform

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

Question: could there be a direction attribute?

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

Broken in IE9

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.

"snow" falls to only 75% of the visible screen, not up to the bottom

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?

Scrollbars flashes

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

Option to exclude mobile devices

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

Cannot read property 'x' of undefined

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:

<script type='text/javascript'> jQuery(document).snowfall({collection : '.main-container', flakeCount : 100, maxSpeed : 10}); </script>

Multiple Images?

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

Minified jQuery version doesn't work

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.

Canvas Offset Misplaced

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!

Conflict with jquery backstretch plugin + Solution

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();)

Different opacity on each flake

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.

Images in firefox

Hi,

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

Possible to have the snowflakes go UP (backwards) or a certain direction?

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.

TypeError on combining Options

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

Snow function fix

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

Device orientation - Landscape problem

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!

AJAX content

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

Stop after n seconds?

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.

Snow falls but only up to 75% of the height of a screen

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?

More then one image

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();  
                        });
                }

Scrollbar flashing referred to in Issue #21 appears to still exist.

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.

Snowflakes not rendering in FF

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 :)

Missing jQuery in Example Index

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

Position error

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

Collect doesn't seem to be working

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 :/

Multiple .snowfall()

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?

Without jQuery Version

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

Really high CPU load with just a few flakes

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.