In the winter, it snows. When the theme of your web page is related to the winter, you maybe want the snowflake to wander in the web page. It is beautiful and attracting. But how can we create the effect of the elegant snowflake wandering without using Flash or Photoshop? Here I have a good idea to tell you. We can use the HTML codes and the CSS layers to create the beautiful snowflake. There will be a layer including a snowflake image, and control the position of the image. It means to use stochastic function to form erratical snowflake. Now let us begin.

clip_image002

Step1

Open the original web page. The original page is like this

clip_image004

 

Step2

Put the following blue text codes into the section between <body> and </body>.

  1. <script language=JavaScript1.2>
  2.  
  3. var snowsrc="images/l.gif"
  4. var no = 10;
  5. var ns4up = (document.layers) ? 1 : 0; // browser sniffer
  6. var ie4up = (document.all) ? 1 : 0;
  7. var dx, xp, yp; // coordinate and position variables
  8. var am, stx, sty; // amplitude and step variables
  9. var i, doc_width = 800, doc_height =600;
  10.  
  11. if (ns4up) {
  12. doc_width = self.innerWidth;
  13. doc_height = self.innerHeight;
  14. } else if (ie4up) {
  15. doc_width = document.body.clientWidth;
  16. doc_height = document.body.clientHeight;
  17. }
  18.  
  19. dx = new Array();
  20. xp = new Array();
  21. yp = new Array();
  22. am = new Array();
  23. stx = new Array();
  24. sty = new Array();
  25.  
  26. for (i = 0; i < no; ++ i) {
  27. dx[i] = 0; // set coordinate variables
  28. xp[i] = Math.random()*(doc_width-50); // set position variables
  29. yp[i] = Math.random()*doc_height;
  30. am[i] = Math.random()*20; // set amplitude variables
  31. stx[i] = 0.02 + Math.random()/10; // set step variables
  32. sty[i] = 0.7 + Math.random(); // set step variables
  33.  
  34. if (ns4up) { // set layers
  35. if (i == 0) {
  36. document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"http://mir123456789.com/\"><img src=’"+snowsrc+"’ border=\"0\"/></a>");
  37. } else {
  38. document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=’"+snowsrc+"’ border=\"0\"/></layer>");
  39. }
  40. } else if (ie4up) {
  41. if (i == 0) {
  42. document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://mir123456789.com\"><img src=’"+snowsrc+"’ border=\"0\"/></a></div>");
  43. } else {
  44. document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src=’"+snowsrc+"’ border=\"0\"/></div>");
  45. }
  46. }
  47. }
  48.  
  49. function snowNS() { // Netscape main animation function
  50. for (i = 0; i < no; ++ i) { // iterate for every dot
  51. yp[i] += sty[i];
  52.  
  53. if (yp[i] > doc_height-50) {
  54. xp[i] = Math.random()*(doc_width-am[i]-30);
  55. yp[i] = 0;
  56. stx[i] = 0.02 + Math.random()/10;
  57. sty[i] = 0.7 + Math.random();
  58. doc_width = self.innerWidth;
  59. doc_height = self.innerHeight;
  60. }
  61.  
  62. dx[i] += stx[i];
  63.  
  64. document.layers["dot"+i].top = yp[i];
  65. document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
  66. }
  67.  
  68. setTimeout("snowNS()", 10);
  69. }
  70.  
  71. function snowIE() { // IE main animation function
  72. for (i = 0; i < no; ++ i) { // iterate for every dot
  73. yp[i] += sty[i];
  74. if (yp[i] > doc_height-50) {
  75. xp[i] = Math.random()*(doc_width-am[i]-30);
  76. yp[i] = 0;
  77. stx[i] = 0.02 + Math.random()/10;
  78. sty[i] = 0.7 + Math.random();
  79. doc_width = document.body.clientWidth;
  80. doc_height = document.body.clientHeight;
  81. }
  82.  
  83. dx[i] += stx[i];
  84. document.all["dot"+i].style.pixelTop = yp[i];
  85. document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
  86. }
  87.  
  88. setTimeout("snowIE()", 10);
  89. }
  90.  
  91. if (ns4up) {
  92. snowNS();
  93. } else if (ie4up) {
  94. snowIE();
  95. }
  96.  
  97. </script>

Let us learn about these codes. var snowsrc="images/l.gif" is to definite the route of image. Of course, if your image is a monkey or a cat, there is no doubt that your page will pour cats or monkeys. Var no = 10 is to definite the numbers of the snowflakes. Dx, xp, and yp is to definite the coordinate. function snowIE() is to set the snowflake function in the Internet Explorer. setTimeout("snowIE()", 10) is to set a timer and refurbish the web page every ten second. At last the functions must be carried out by a sentence. The document objects consist of anchors, links, forms, location and so on.

Step3

Go back to the design view. Save the document and press F12 to preview it in the Internet Explorer. Compared with the original pictures, the final effect is like the following picture showing:

clip_image005

Finally, we have created the snow effect. The codes look boring. It refers to some function, which are necessary to the snowflake effect. Take it easy and look it again. No doubt that it is a little difficult. But when you see the elegant snowflakes are wandering in your web page. You will be contented with your work.

For help, advice, tips and tricks, challenges, feel free to visit ourDoNotYet forum or Submit your good resource to share.

Reminder: Unless stated otherwise, all resources published on this site are NOT for commercial use. To use any resource from this site for commercial purposes, please contact the author.

Related Posts