Here is a sample of 3D snow effect on HTML page. This sample work with a help of HTML5 and three.js library.
Snowflakes are moving in 3D manner and if you move mouse on left snowflakes will rotate to left. Same thing function for other directions. Try it!.
This 3D snow effect work on new version of browsers which support HTML5 functionality.
It seem this effect does not work on Internet Explorer browser but it works well on Chrome and Firefox.
Here is 3D snowfall code:
Let's explain 3D snowfalling code
- Line 1 to 9 is a style for div HTML element in which snowfall effect is putted, this style is used for .snow class, you can change value in style to adjust width, height or color to your needs
- Line 11 is div element, its class in snow so style from beginning of code is used on this div
- Line 13 to 14 is a reference to three.js library, it is 3D library
- Line 15 to 16 is a reference to Snow.js library. This library make this cool 3D snow effect
- Line 17 to 18 is a reference to 3DSnowBox.js. This file is mine and it make call to Snow.js easier
If you find this article useful please make a link to this article on your page or blog!