Thursday, December 6, 2012

3D snowflakes effect on HTML page or blog

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!


7 comments:

Arjay said...

wow! it feels like the snows really are coming out from my monitor into me. :D

artur99 said...

Nice, but where is the code? :D

Mark said...

To Artur:
Code will be in this article for a few days.
Today I am little tired :)
Try visit this page in thursday.

Anonymous said...

The snow only seems to be in a small part of the page.. how do I make it cover the full page?

Anonymous said...

It works also with Internet Explower, Great.....

Anonymous said...

I know this is an old post, but does anyone know how to disable to mouse movement. I have read the code several times and can't seem to disable it.

Calisa Rhose said...

when I tried to add the code I get this message upon saving: This website has hot-linked to JS files without permission :( How can I get the permission required?