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:
<style type="text/css">
.snow {
background-color: #000099;
margin: 0px;
overflow: hidden;
width: 650px;
height: 350px;
}
</style>
<div id="Div1" class="snow"></div>
<script type="text/javascript" src="http://seb.ly/demos/JSSnow/js/ThreeCanvas.js">
</script>
<script type="text/javascript" src="https://dl.dropbox.com/u/59215462/SnowFall/3D/Snow.js">
</script>
<script src="https://dl.dropbox.com/u/59215462/SnowFall/3D/3DSnowBox.js"
type="text/javascript"></script>
<script>
init('Div1');
</script>
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
- line 20 to 22 is a javascript call to a Init method with id parameter of div element in which 3D snow should occur
If you find this article useful please make a link to this article on your page or blog!
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon