6 réponses à “Neige qui tombe : Un peu de gaieté sur votre site web pour Noël”

1. Francis Terry dit :

   21/12/2011 à 11 h 08 min

   Salut, j’ai utilisé le code mais et ça fonctionne correctement avec firefox et chrome mais avec Internet explorer il ne se passe rien. Que faut-il faire? Merci

2. Troll dit :

   31/12/2011 à 17 h 36 min

   Salut Francis,

   Hum, je dois avouer que ça fait trèèèès longtemps que je n’ai pas utilisé Internet Explorer.

   Tu pourrais me dire avec quelle version de Internet Explorer tu as testé ?

3. Théo dit :

   14/12/2012 à 13 h 53 min

   Bonjour, j’ai fait un autre code:

   var snow = {

   wind : 0,
   maxXrange : 100,
   minXrange : 10,
   maxSpeed : 3,
   minSpeed : 1,
   color : "#fff",
   char : "*",
   maxSize : 25,
   minSize : 10,

   flakes : [],
   WIDTH : 0,
   HEIGHT : 0,

   init : function(nb){
   var o = this,
   frag = document.createDocumentFragment();
   o.getSize();

   for(var i = 0; i < nb; i++){
   var flake = {
   x : o.random(o.WIDTH),
   y : - o.maxSize,
   xrange : o.minXrange + o.random(o.maxXrange - o.minXrange),
   yspeed : o.minSpeed + o.random(o.maxSpeed - o.minSpeed, 100),
   life : 0,
   size : o.minSize + o.random(o.maxSize - o.minSize),
   html : document.createElement("span")
   };

   flake.html.style.position = "absolute";
   flake.html.style.top = flake.y + "px";
   flake.html.style.left = flake.x + "px";
   flake.html.style.fontSize = flake.size + "px";
   flake.html.style.color = o.color;
   flake.html.appendChild(document.createTextNode(o.char));

   frag.appendChild(flake.html);
   o.flakes.push(flake);
   }

   document.body.appendChild(frag);
   o.animate();
   window.onresize = function(){o.getSize();};
   },

   animate : function(){
   var o = this;
   for(var i = 0, c = o.flakes.length; i < c; i++){
   var flake = o.flakes[i],
   top = flake.y + flake.yspeed,
   left = flake.x + Math.sin(flake.life) * flake.xrange + o.wind;
   if(top < o.HEIGHT - flake.size - 10 && left 0){
   flake.html.style.top = top + "px";
   flake.html.style.left = left + "px";
   flake.y = top;
   flake.x += o.wind;
   flake.life+= .01;
   }
   else {
   flake.html.style.top = -o.maxSize + "px";
   flake.x = o.random(o.WIDTH);
   flake.y = -o.maxSize;
   flake.html.style.left = flake.x + "px";
   flake.life = 0;
   }
   }
   setTimeout(function(){
   o.animate();
   },20);
   },

   random : function(range, num){
   var num = num?num:1;
   return Math.floor(Math.random() * (range + 1) * num) / num;
   },

   getSize : function(){
   this.WIDTH = document.body.clientWidth || window.innerWidth;
   this.HEIGHT = document.body.clientHeight || window.innerHeight;
   }

   };

   window.onload = function(){
snow.init(50);
};

   exemple: -www.ts3tete66684.net46.net/Neige.php

4. Troll dit :

   14/12/2012 à 16 h 27 min

   Sympa, effectivement.

   Par contre, il faut changer un peu les paramètres utilisés sur ta page d’exemple.

   En effet, non seulement ils sont trop nombreux / rapides d’un point de vu utilisateur (désagréable pour le lecteur de la page internet), mais surtout : ça fait bien ramer l’ordi !

   Ton ordi est peu être assez puissant, mais sur mon netbook avec un Atom 1.6GHz ben elle rame bien la page d’exemple

5. cindy Hoareau dit :

   02/12/2013 à 11 h 34 min

   commen fait ton pour changer la couleur des flocon avec le premier code que vous avez donner merci

6. Troll dit :

   03/12/2013 à 10 h 12 min

   Salut Cindy,

   Il suffit de changer l’image.

   Télécharge l’image ici

   Puis modifies-la et héberge-la quelque-part, puis change la ligne :

   
var snowsrc='http://trollfactory.fr/img/snow.gif'; // VOUS ETES PRIE DE BIEN VOULOIR HEBERGE L'IMAGE CHEZ VOUS !


   par

   
var snowsrc='URL_VERS_TON_IMAGE_COLOREE_ICI';