scottschiller / snowstorm Goto Github PK

See https://github.com/scottschiller/Snowstorm/pull/23/files for a simple fix.

So I haven't edited or changed anything, and I really want to include this on my website with credits.

Any preferred way.

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

In Chrome 39.0.2171.95 m (64-bit) when I switch tab of web page which have Snowstorm script with default settings and when little time later if I come back to that snowstorm tab then snow speeds up 2-3x and this happens in http://www.schillmania.com/projects/snowstorm/ or http://www.schillmania.com/projects/snowstorm/basic-example.html too.
If I unfocus chrome and re focus then speed returns back to normal.

Example recorded video: https://dl.dropboxusercontent.com/u/14076298/ShareX/2014/12/1ANT12pzOv.mp4

I switch to example tab and snow is fast, then I unfocus and re focus chrome and snow speed returns back to normal speed.

Edit: Making snowStorm.freezeOnBlur = false; solves problem.

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?

Small issue but the excludeMobile property is assigned twice - line 19 and again on 25.

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 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 !

Performance is really bad on FF quantum. Oddly enough, not from the start, it works fine for the first 5s, and then it slows down and kills my CPU.

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.

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?

wonder if there is a quick fix to re-render the lights after the window is resized?

Best Regards,

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

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

If you ever feel like a rewrite, here's one that is implemented using a canvas: http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect

It uses way less CPU and is smooth on my phone. I simply create the canvas element on the fly with position absolute and it works great. Yours has more features though.

I'm using Chrome for Android, on a Samsung Note 4

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

so that ppl can install it with a simple bower install snowstorm

See http://bower.io/#registering-packages to register.

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?

autoStart config property doesn't works. No way to set it before:
// hooks for starting the snow
if (s.autoStart) {
s.events.add(window, 'load', doStart, false);
}

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.

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

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

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 have snowstorm running in a page that contains an iframe. when i click into the iframe, the snow stops.