Снег на JS

  1. <style>html,body{margin:0;height:100%;}body{background:#6B92B9}</style>
  2. <script language="JavaScript">
  3. var snowMax = 35;
  4. var snowColor = ["#DDD", "#EEE"];
  5. var snowEntity = "•";
  6. var snowSpeed = 0.75;
  7. var snowMinSize = 8;
  8. var snowMaxSize = 24;
  9. var snow = [],
  10.     pos = [],
  11.     coords = [],
  12.     lefr = [],
  13.     marginBottom,
  14.     marginRight;
  15. function randomise(range) {
  16.     rand = Math.floor(range * Math.random());
  17.     return rand;
  18. }
  19.  
  20. function initSnow() {
  21.     var snowSize = snowMaxSize - snowMinSize;
  22.     marginBottom = document.body.scrollHeight - 5;
  23.     marginRight = document.body.clientWidth - 15;
  24.     for (i = 0; i <= snowMax; i++) {
  25.         coords[i] = 0;
  26.         lefr[i] = Math.random() * 15;
  27.         pos[i] = 0.03 + Math.random() / 10;
  28.         snow[i] = document.getElementById("flake" + i);
  29.         snow[i].style.fontFamily = "inherit";
  30.         snow[i].size = randomise(snowSize) + snowMinSize;
  31.         snow[i].style.fontSize = snow[i].size + "px";
  32.         snow[i].style.color = snowColor[randomise(snowColor.length)];
  33.         snow[i].style.zIndex = 1000;
  34.         snow[i].sink = snowSpeed * snow[i].size / 5;
  35.         snow[i].posX = randomise(marginRight - snow[i].size);
  36.         snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size);
  37.         snow[i].style.left = snow[i].posX + "px";
  38.         snow[i].style.top = snow[i].posY + "px";
  39.     }
  40.     moveSnow();
  41. }
  42. function resize() {
  43.     marginBottom = document.body.scrollHeight - 5;
  44.     marginRight = document.body.clientWidth - 15;
  45. }
  46. function moveSnow() {
  47.     for (i = 0; i <= snowMax; i++) {
  48.         coords[i] += pos[i];
  49.         snow[i].posY += snow[i].sink;
  50.         snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + "px";
  51.         snow[i].style.top = snow[i].posY + "px";
  52.  
  53.         if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) {
  54.             snow[i].posX = randomise(marginRight - snow[i].size);
  55.             snow[i].posY = 0;
  56.         }
  57.     }
  58.     setTimeout("moveSnow()", snowRefresh);
  59. }
  60. for (i = 0; i <= snowMax; i++) {
  61.     document.write("<span id='flake" + i + "' style='" + snowStyles + "position:absolute;top:-" + snowMaxSize + "'>" + snowEntity + "</span>");
  62. }
  63. window.onresize = resize;
  64. window.onload = initSnow;
  65. </script>
Снег на JS с минимальной нагрузкой на ЦП....
Автор: Kurisu Brooks
https://github.com/kurisubrooks/snow.js
Пример: http://kurisubrooks.github.io/snow.js/

Реклама

Мы в соцсетях

tw tg yt gt