Utilisateur:Pinocchio/snowfall.js

// Snow effect
// Based on http://sutherlandboswell.com/2012/11/creating-pretty-snow-with-javascript-html-css

var snowfallscrw = 0;
var snowfallscrh = 0;
var snowfallflakemax = 120;
var snowfallgravity = 4;
var snowfallwind = 5;
var snowfallflakes = [];


function snowfallgetrandom(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
}

// flakes animation
function snowfallanimate() {
   for (var i = 0; i < snowfallflakes.length; i++) {
      newX = false;
      newY = false;
      // calculate Y position
      newY = parseFloat(snowfallflakes[i].style.top) + (snowfallflakes[i].speed / 100) * snowfallgravity;
      // if screen bottom reached
      if (newY > snowfallscrh) {
          newY = 0 - parseInt(snowfallflakes[i].style.fontSize);
          newX = snowfallgetrandom(0,snowfallscrw);
      }
      // Calculate X position if it hasn't been set randomly
      if (!newX) newX = parseFloat(snowfallflakes[i].style.left) + Math.sin(newY / snowfallwind);
      if (newX < -20) newX = snowfallscrw + 20;
      if (newX > snowfallscrw + 20) newX = -20;
      // Set new position
      snowfallflakes[i].style.top = newY + 'px';
      snowfallflakes[i].style.left = newX + 'px';
   }
}

// create flakes
function snowfallcreate() {
   var nbflake = 0;
   while (nbflake < snowfallflakemax) {
      snowfallscrw = document.getElementById("bodyContent").clientWidth - 50;
      snowfallscrh = document.getElementById("bodyContent").clientHeight;
      var flake = document.createElement("div");
      flake.className = 'flake';
      flake.style.fontSize = snowfallgetrandom(12,45) + 'px';
      flake.style.top = snowfallgetrandom(0,snowfallscrh) + 'px';
      flake.style.left = snowfallgetrandom(0,snowfallscrw) + 'px';
      // •✱❆
      flake.innerHTML = "•";
      var nf = document.getElementById("bodyContent").appendChild(flake);
      nf.speed = snowfallgetrandom(10,100);
      snowfallflakes.push(nf);
      nbflake++;
   }

   setInterval(snowfallanimate, 40);
}

addOnloadHook(snowfallcreate);


window.onresize = function(event) {
   snowfallscrw = document.getElementById("bodyContent").clientWidth - 50;
   snowfallscrh = document.getElementById("bodyContent").clientHeight;
}