Snowy scene in javascript for Christmas

cypto · 24 Dec 2013 at 21:16

Looking through a few old Christmas photographs, decided to create a subtle snowy scene with some simple javascript.

Just something festive for this time of year and a good test of skills in making something slightly more interesting that forum validation in JS.

Hope you guy enjoy it.
Maybe come up with your own variants by modifying the script.

Tripnologist · 28 Dec 2013 at 11:03

Well, I quite like it. Nice and subtle.

RedvGreen · 28 Dec 2013 at 18:14

Might need to adjust for different resolutions, or set the window open size limits - it has tiled on mine and all snowy goodness effect has been lost now. Bah Humbug

spenncerr · 29 Dec 2013 at 23:56

I had an issue with image tiling like that also.

How can you make it so that an image scales to fit a certain div size? No matter the resolution?

Nice JS tidbit there btw.

Tripnologist · 30 Dec 2013 at 00:32

spenncerr said:
I had an issue with image tiling like that also.

How can you make it so that an image scales to fit a certain div size? No matter the resolution?

Nice JS tidbit there btw.

You can set width: 100%; height: auto;
or you can use background-size.

background-size is better, but slightly limited with browser support.
http://caniuse.com/background-img-opts

spenncerr · 30 Dec 2013 at 18:32

Tripnologist said:
You can set width: 100%; height: auto;
or you can use background-size.

background-size is better, but slightly limited with browser support.
http://caniuse.com/background-img-opts

That hasn't fixed it for me. Can't work out what I'm doing wrong

Deleted member 77746 · 30 Dec 2013 at 20:24

Get it to follow the mouse too

Tripnologist · 30 Dec 2013 at 21:14

spenncerr said:
That hasn't fixed it for me. Can't work out what I'm doing wrong

Set the image as a background, then use background-size: cover;

http://css-tricks.com/perfect-full-page-background-image/

spenncerr · 30 Dec 2013 at 23:31

Tripnologist said:
Set the image as a background, then use background-size: cover;

http://css-tricks.com/perfect-full-page-background-image/

I'm trying to cover a certain area of the page though, not the entire page.

Tripnologist · 31 Dec 2013 at 00:42

spenncerr said:
I'm trying to cover a certain area of the page though, not the entire page.

It shouldn't matter. Apply the image as a background to the div, section, article or wherever it is you want it and then use background-size to make it fill as you want.

I can whip up a quick example for you, if it'll help?

cypto · 31 Dec 2013 at 12:29

Thanks for the tips Tripnologist, adjusted the files so the image covers the screen. Thought about using media queries to swap the image for different resolutions but it seems to work great as is.

spenncerr · 1 Jan 2014 at 16:56

Tripnologist said:
It shouldn't matter. Apply the image as a background to the div, section, article or wherever it is you want it and then use background-size to make it fill as you want.

I can whip up a quick example for you, if it'll help?

If you could that would be great.

Tripnologist · 2 Jan 2014 at 18:37

spenncerr said:
If you could that would be great.

Here you go.
http://codepen.io/anon/pen/ljfGr