We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.


Posted By

frakim on 01/13/08


Tagged

js script snow Neige


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

darkphotn
jonhenshaw
adix
snucko


Snow JS Script


Published in: JavaScript 


Pour avoir un effet de flocons de neige sur l'écran
Code insertion:


  1. //Snow - http://www.btinternet.com/~kurt.grigg/javascript
  2.  
  3. if ((document.getElementById) &&
  4. window.addEventListener || window.attachEvent){
  5.  
  6. (function(){
  7.  
  8. //Configure here.
  9.  
  10. var num = 5; //Number of flakes
  11. var timer = 30; //setTimeout speed. Varies on different comps
  12.  
  13. //End.
  14.  
  15. var y = [];
  16. var x = [];
  17. var fall = [];
  18. var theFlakes = [];
  19. var sfs = [];
  20. var step = [];
  21. var currStep = [];
  22. var h,w,r;
  23. var d = document;
  24. var pix = "px";
  25. var domWw = (typeof window.innerWidth == "number");
  26. var domSy = (typeof window.pageYOffset == "number");
  27. var idx = d.getElementsByTagName('div').length;
  28.  
  29. if (d.documentElement.style &&
  30. typeof d.documentElement.style.MozOpacity == "string")
  31. num = 12;
  32.  
  33. for (i = 0; i < num; i++){
  34. sfs[i] = Math.round(1 + Math.random() * 1);
  35.  
  36. document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
  37. +sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>');
  38.  
  39. currStep[i] = 0;
  40. fall[i] = (sfs[i] == 1)?
  41. Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
  42. step[i] = (sfs[i] == 1)?
  43. 0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
  44. }
  45.  
  46.  
  47. if (domWw) r = window;
  48. else{
  49. if (d.documentElement &&
  50. typeof d.documentElement.clientWidth == "number" &&
  51. d.documentElement.clientWidth != 0)
  52. r = d.documentElement;
  53. else{
  54. if (d.body &&
  55. typeof d.body.clientWidth == "number")
  56. r = d.body;
  57. }
  58. }
  59.  
  60.  
  61. function winsize(){
  62. var oh,sy,ow,sx,rh,rw;
  63. if (domWw){
  64. if (d.documentElement && d.defaultView &&
  65. typeof d.defaultView.scrollMaxY == "number"){
  66. oh = d.documentElement.offsetHeight;
  67. sy = d.defaultView.scrollMaxY;
  68. ow = d.documentElement.offsetWidth;
  69. sx = d.defaultView.scrollMaxX;
  70. rh = oh-sy;
  71. rw = ow-sx;
  72. }
  73. else{
  74. rh = r.innerHeight;
  75. rw = r.innerWidth;
  76. }
  77. h = rh - 2;
  78. w = rw - 2;
  79. }
  80. else{
  81. h = r.clientHeight - 2;
  82. w = r.clientWidth - 2;
  83. }
  84. }
  85.  
  86.  
  87. function scrl(yx){
  88. var y,x;
  89. if (domSy){
  90. y = r.pageYOffset;
  91. x = r.pageXOffset;
  92. }
  93. else{
  94. y = r.scrollTop;
  95. x = r.scrollLeft;
  96. }
  97. return (yx == 0)?y:x;
  98. }
  99.  
  100.  
  101. function snow(){
  102. var dy,dx;
  103.  
  104. for (i = 0; i < num; i++){
  105. dy = fall[i];
  106. dx = fall[i] * Math.cos(currStep[i]);
  107.  
  108. y[i]+=dy;
  109. x[i]+=dx;
  110.  
  111. if (x[i] >= w || y[i] >= h){
  112. y[i] = -10;
  113. x[i] = Math.round(Math.random() * w);
  114. fall[i] = (sfs[i] == 1)?
  115. Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
  116. step[i] = (sfs[i] == 1)?
  117. 0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
  118. }
  119.  
  120. theFlakes[i].top = y[i] + scrl(0) + pix;
  121. theFlakes[i].left = x[i] + scrl(1) + pix;
  122.  
  123. currStep[i]+=step[i];
  124. }
  125. setTimeout(snow,timer);
  126. }
  127.  
  128.  
  129. function init(){
  130. winsize();
  131. for (i = 0; i < num; i++){
  132. theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
  133. y[i] = Math.round(Math.random()*h);
  134. x[i] = Math.round(Math.random()*w);
  135. }
  136. snow();
  137. }
  138.  
  139.  
  140. if (window.addEventListener){
  141. window.addEventListener("resize",winsize,false);
  142. window.addEventListener("load",init,false);
  143. }
  144. else if (window.attachEvent){
  145. window.attachEvent("onresize",winsize);
  146. window.attachEvent("onload",init);
  147. }
  148.  
  149. })();
  150. }//End.

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: jonhenshaw on January 13, 2008

French to English: "To have an effect of snowflakes on the screen" (from Google Translate)

You need to login to post a comment.