Categories
General

JavaScript HTML5 Canvas Snow in 3D

Snow storm in JS and HTML

Incredibly, the early bird tickets on my HTML5/JS training course sold out in just 20 minutes today! And to celebrate I thought you might like an early Christmas present – JavaScript HTML5 canvas snow in 3D! 🙂

If you want to use this effect on your site, please feel free but PLEASE DO NOT HOTLINK TO MY FILES! Copy the files on github to your own server!

I adapted one of the Mr.doob‘s three.js Particle examples. I’ve extended the particle class and added velocity to update it’s position. Anyone that knows me knows that I’ve been making snow for a while now! Most people’s first approach is to make the snow move left and right but actually you don’t need to do that. If there are lots of flakes all moving in different directions it pretty much has the same effect, and it gives much simpler and more uniform effect.

As ever, the code is fully commented and available on github.

[UPDATE: code has been updated now to work in Three.js revision 46]

68 replies on “JavaScript HTML5 Canvas Snow in 3D”

Yeah – it’s ironic that people are shifting from Flash to JS because of the iPad and yet the iPad does not handle anything but the most basic JS animations.

absolutely gorgeous.. and if I wanted to annoy the hell out of my users, how would I do so? lol- would I save all the available files, then upload them to my site, then throw in normal js tags that point to the files? ..is there a quick tut we might find? cuz this is definitely above my pay grade 😛

Yes, please start putting HTML5 snow on EVERYTHING. And don’t forget the skip intro button, please. Show the world that you don’t need Flash to annoy the living sh*t out of people!!

Thanks for the example! I’m interested to know if you have you tried including the html5 directly in your blog’s (WordPress?) post/page? It should be possible, but I can’t seem to get it working on my own site. Cheers.

[…] JavaScript HTML5 Canvas Snow in 3D Category : CSS, CSS3, JavaScript Tag : CSS, CSS3, JavaScript […]

“canvas rendering on iOS is pretty slow”
not only on IOS, same thinghere on my android devices (smartphone and tabs)
and i have a 70% of CPU on desktop (with chrome)

for me this is to high, sorry i don’t but it.

Has anyone been able to adapt this to IE 7 and 8? I made an attempt using Google’s ‘excanvas.js’ but with no luck.

Does anyone know how to set this to use its own js as it lags when my image scroller changes?

I like this snow…but I met an issue.
I see Three.js lib including here is r28; now the latest is r46. I replace the Three.js with the latest one. But always, it gives me error” Uncaught Type Error: undefined is not a function ” for this line in html body.
particle = new Particle3D( new THREE.ParticleBitmapMaterial( particleImage));

Is there any way to fix this problem? I prefer using the latest Three.js(r46).

Just for you, chengw, Christmas has come early. I’ve updated the source code to work with revision 46 of Three.js – there have been quite a few API changes. I hope this helps!

Seb

Hello,

I was interested in using this effect on our christmas ‘e-card’ this year and was wondering if the code is free to use?

Thanks,

Justin

Hi Seb,
I am a web designer for Philadelphia University and first off I have to tell you that I love this snow effect. I incorporated it into a holiday ecard that will be sent out in the next few days. Everything looks great in all browsers besides IE7 and IE8. The snow renders well on mobile devices as well. The only problem that I am having is that my anchor tags are not working on the iPad or android tablets. Do you know what might be the issue? Here is a link to my test url – //www.philau.edu/test/snow_demo/JSSnow/snow3d.html

Thank You,

Matt

haha love how you can smash the lights!

The reason scrolling and tapping doesn’t work is because we’re hijacking touches to affect the snow. Look at the onDocumentTouchStart and onDocumentTouchMove functions and comment out the bit that says event.preventDefault. You won’t be able to control the snow with touches any more but at least it’ll work.

(A better solution would be to deal with the touch events more intelligently but I don’t have time to sort that out right now, sorry!)

hi i have a flash site and i want to emeded this snow in flash or put this code in my html index and put this snow over the swf object in trasparent div how can i put it??? can you help me?

i have a simple table on my page and i was wanting a particular cell to have the snow falling. is this possible?

The snowfall sits below all html elements on the webpage. Please help position it on top of the elements. I tried z-index for body tag to no succes.
Please help. Thank you!

Well I faced same issue, fixed by adding these styles to container into init()

container = document.createElement(‘div’);
container.style.position = “fixed”;
container.style.top = “0px”;
document.body.appendChild(container);

Now I have a problem cause it’s on top of all elements 🙁

I’ve tried to include Snow.js, ThreeCanvas.js and the script included in the page (which I’ve called Source.js) in my blog page, is there any reason I’m not getting any results?

i ve added it but is showing under the html elements . kvako where to add these styles exactly?

Hi,

It works fine locally, but when I upload it to my server it doesn’t work. The console log gives me the following error:

ReferenceError: Particle3D is not defined
particle = new Particle3D( material);

PLEASE HELP!!!

Hi, How can I use it on my website snow? I have downloaded the files an the uploaded on my server. unfortunately it does not work . Have you a guide on how I can embed on my page ? I just want the snow effect with a transparent background. Thank you very much

How to add this effect in front of html page? I’ve add the html code and js also the img but the effect show at the bottom part of the page.. Help please 🙂

Fantastic effect Seb, completely hypnotizing!

I Hope the following might help others trying to get the snowfall to appear where they want it 🙂

To get the snow over the whole page rather than just at the bottom of the page, I amended the init() function in the snow3D HTML. I changed:

container = document.createElement(‘div’);
document.body.appendChild(container);

…to…

container = document.createElement(‘div’);
container.style.position = ‘fixed’;
container.style.top = 0;
container.style.height = ‘100%’;
document.body.appendChild(container);

This does stop underlying links working though, so then I decided to have the snow just over the banner image.

The image was 80px from the top and 250px high. I changed:

container.style.top = 0;

…to…

container.style.top = ’80px’;

I also had to change the startup script just before the init() function. I changed:

var SCREEN_HEIGHT = window.innerHeight;

…to…

var SCREEN_HEIGHT = 250;

…and…

var windowHalfY = window.innerHeight / 2;

…to…

var windowHalfY = 125;

Looks perfect 🙂

Hey Seb,

I’ve been into what was originally called DynamicHTML since the late 90s. Remember Netscape Navigator’s 4’s Layers?

Anyway re your snow. It is without doubt the best snow animation/effect I have EVER seen. Absolutely mesmerizing.

Last Orders for Christmas says:
December 7, 2011 at 10:31 am

To answer Tomas Parkes – we’ve got it on an absolutely positioned div on here: //www.lastordersforchristmas.co.uk/, in between the background and the content.
————————————————————————————

Hi — I’m hoping you can help me. I know precious next to nothing about javascript but am hoping to place the snow between background and foreground. Covering the foreground would be acceptable. But as it is now, it’s below the image on the page. — Thanks.

Fixed, but with some limitation; For other users who want to use it on a similar site:

change:

container = document.createElement(‘div’);
document.body.appendChild(container);

…to…

container = document.createElement(‘div’);
container.style.position = ‘fixed’;
container.style.top = 0;
container.style.height = ‘100%’;
container.style.zIndex = 15000;
container.style.pointerEvents = “none”;

– pointerEvents lets the links work
– zIndex puts the snow over all the banners and site layers

Than I had to comment the mouse following effects:

//document.addEventListener( ‘mousemove’, onDocumentMouseMove, false );
//document.addEventListener( ‘touchstart’, onDocumentTouchStart, false );
//document.addEventListener( ‘touchmove’, onDocumentTouchMove, false );

Otherwise it will not work on mobile phones (can’t scroll the page)

Than chack the link to .js and img and fix it if needed (for prestashop “js/ThreeCanvas.js” becomes “/themes/themeName/js/ThreeCanvas.js” )

Hope could be useful. 🙂

Nadia

Comments are closed.