Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.

we dont need line #461 of https://github.com/scottschiller/Snowstorm/blob/master/snowstorm.js when we want to have the same wind parameters and use the settings of vMaxX and vMaxY so these values are not overwritten by the s.randomizeWind(); at each start

I have changed the Snow dot on my website to the 🍂 icon, this being accomplished with "🍂 (U+1F342)" However, I cannot find the best setting for the pixels.

			<script type="text/javascript">
				snowStorm.snowColor = '#DBFFFF'; // blue-ish snow!? < This is poinless if unicode icon present
				snowStorm.flakesMaxActive = 24;  // show more snow on screen at once
				snowStorm.animationInterval = 40; // Flakes Dropping Now
				snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
				snowStorm.excludeMobile = false;  // Excludes mobile
				snowStorm.snowCharacter = '🍂'; // for fall 🍁🍂
				snowStorm.useMeltEffect = false; // Disable for fall
				snowStorm.flakeWidth = 11; // Fix Width clip
				snowStore.flakeHeight = 11; // Fix Height clip
			</script>

Changing the sizes any higher at all only widen 90% of the way, but I cannot get the height correct, any alternative?

This is the best I can get it by adjusting the flakes to very large pixels

When the body has position: relative in CSS the snow falls straight down at high speeds. When disabling this via browser dev tools, the snow starts falling normally again.

I currently use java at http://www.skarmoutsos.gr/vaggelis.htm to have a snow effect over an image. Is it possible to have snow over one image instead of a page, using Snowstorm?

I got as far as disabling all my add-ons before I worked out Firefox's extra CPU usage was caused by having a tab (2 in my case) with snow open that I hadn't switched to in the current session.

Since it's impossible to detect if the window is already blurred on load, I was thinking of changing it to only start after the user moves their mouse. Naturally, freezeOnBlur=false would bypass this.

Any obvious problems with doing that I may have missed?

I'm probably just not understanding the way relative/absolute should work but when using targetelement the flakes go way off the element.

Obviously overflow:hidden fixes the scrollbar issues but the flakes don't stick to the bottom, they are still going well below the bottom of the element.

I can set the flakebottom but that doesn't work always for some reason, any ideas?

I've made a codepen for an example of what I'm talking about here: https://codepen.io/joeybab3/pen/RwJYwRV

I have a page where I need to use z-index because of different layers. It would be awesome if there was an option to set a z-index or if the snow-div elements should have a class (or if there was an option for a class to set) so i could set a z-index for the snowflakes myself.

Anyway it's a super cool and easy to use snow effect, nice work !

I want to apply the effect to a smaller field than the whole page and I want the flakes to land on the bottom. However, they seem to go to the bottom of the screen and then "teleport" to the bottom of the targetElement. And sometimes, they land, but keep moving horizontally.

Recreate this issue by creating a div with e.g. 500px width and height, then set that div as the target element.

Hello everybody!

I'm a complete newb at javascript and i've searched the internet to come up with a solution but nothing worked. What i want to do is to have a button on my website to start and stop the snow. So far i found a button to stop it:

Stop Snowing

So what i need right now is a way to be able to have the page load without snowing right away. I thought i had found a solution in this.autoStart = false; but this didn't happen.

How can i make a 'start snowing button'? How can i have it standard non-snowing?

Thank you very much for reading. Kind regards, Jonas Pijnenburg

Hello i tried to get custom snow with one image so i put the images in the folder the html was in /image/snow and it did not work so i did that in the root of the site and that did not work what am i doing wrong? Edit: Never mind i just had to use an older version

Is it possible to re-initialize the snowStorm if you want to update a value after it's running?

For example say I want to do:

snowStorm.snowColor=newColor

After the storm has already started. It seems this can only be changed during the first initialization. Is there a work around to change configuration values and then re-load?

Hi there, I've set the color to #fff which is the color white. But when I view it on my phone, it appears to be light blue. How can I fix this ? Thanks

hello, firstly thanks for this its great... problem is it hides behind my rev slider (html) and i cannot get it top stay in front of the slider... anyone help please

First of all, thanks for the great plugin.

Is there a way I can control the wind direction? I know that I can control the max and min speed, but I didn`t find a way to control the direction. It seems like it is always random.

Would be nice if there was a way to control the size of the snowflakes other than overwriting the font-size for the snowflakes.

When Switching CSS, snowStorm will stop or start this will also generates/overrides the cookie that will determine to load the snowStorm again.

~Buggy~ It may run the snowStorm plugin when the selected theme is Summer!