Discussion :

[SpaceFrog]

Bonjour,

Je vous propose une petit script de saison inspiré d'une source trouvée sur le net, je l'ai réécrit pour créer les éléments avec le DOM:
J'ai également intégré des paramètres supplémentaires.

on peut paramétrer:
le nombre de flocons
leur vitesse verticale
la vitesse horizontale ainsi que leur amplitude de balancement
un vent de travers


Il est d'après mes tests crossbrowser, et le rendu est assez réaliste pour peu que l'on mette des images de flocon réalistes...

L'effet est visible sur cette page de Démo

Personnalisez le avec vos flocons ! (ou coeurs pour la saint valentin, chauves souris pour Halloween ...)
Postez juste les liens vers vos sites décorés ci dessous. On pourra juger des plus beaux flocons

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
/****************************************** 
* Titre:	De la neige !!!
* Réécrit par Spacefrog	
* Date: 	12/2009
******************************************/ 
var IsIE6 = !!document.all && !window.XMLHttpRequest
 
var ext=(IsIE6)?'gif':'png';	
 
var IsIE=!!document.all; 
 
	  var snowsrc=new Image();
	  snowsrc.src="images/snowflake."+ext 
	  var snowsrc1= new Image;
	  snowsrc1.src="images/snowflake1." +ext	  
 
  // Configure below to change number of snow to render 
var densite = 50; 
 
 
 
var dx, xp, yp;    // coordinate and position variables 
var am, vx, vy;  // amplitude and step variables 
var i, doc_width , doc_height ; 
var vitesseH = 1 //coefficient de vitesse de balancement
var changevent=true // pour ajouter la variation du sens et de l'intensité du vent
var vent =new Array(10,0,-10,-20,0,-5,-10,-5,-3,0,2,3,5,10,20,30,50,60,80,70,50,30,10,0,-1,-5,-10,-20);//Vent de travers  positif=> G à D _ négatif => D à G.
var forceH=0;
var drift=10; 
 
var changechute=true
var chute= new Array(1,2,3,2,1,1,2,3,4,5,4,3,5,4,6,4,2,3,2,1,1,1,1,1,1) //Vitesse de chute des flocons de 1 à 10
var forceV=0 
var vitesseV = 1 //coefficient de vitesse de chute
 
var dx = new Array(); 
var xp = new Array(); 
var yp = new Array(); 
var am = new Array(); 
var vx = new Array(); 
var vy = new Array(); 
 
function init(){
 
	//Densité de flocons:
	doc_width = document.body.offsetWidth; 
    doc_height = document.body.offsetHeight;   
	densite=Math.floor(doc_width/10);
 
 
	var flake= document.createElement('img');
	flake.style.border='0';
	flake.style.width="auto";
	flake.style.height="auto";
 
	var flakediv=document.createElement('div');
	    flakediv.style.position='absolute';
		flakediv.style.top='15px';
		flakediv.style.left='15px';
		flakediv.style.display="none";
 
	//Position des flocons
	for (i = 0; i < densite;  i++) {  
		dx[i] = 0;                        // set coordonnés variables 
		xp[i] = Math.random()*(doc_width-50);  // positions variables 
		yp[i] = Math.random()*doc_height; 
		am[i] = Math.random()*40;         // amplitude de balancement 
		vx[i] = 0.02 + Math.random()/10 * vitesseH; // vitesse horizontale variable 
		vy[i] = 0.9 + Math.random() * vitesseV;     // vitesse verticale variable 
 
 
		var opacite=Math.random()*100;
		var newflake=flakediv.cloneNode(true);
		newflake.id="flocon"+i;
		newflake.zIndex=i+1;
		newpic=flake.cloneNode(true);
		newpic.src=(i % 2==0)?snowsrc.src:snowsrc1.src;
		newflake.appendChild(newpic);
		IsIE?newflake.style.filter="alpha(opacity="+opacite+")":newflake.style.opacity=opacite/100;
		document.body.appendChild(newflake);
	}
	var neige=setInterval(function(){snow()},30);  
	if (changevent==true){ var girouette=setInterval(function(){wind()},4250);
		}
	if (changechute==true){ var intesite=setInterval(function(){fall()},7130);
		}
	}	
 
function wind(){
	drift = vent[forceH]
	forceH++	
	forceH=(forceH>vent.length)?0:forceH;
}
 
function fall()	{
	vitesseV = chute[forceV]
	forceV++	
	forceV=(forceV>chute.length-1)?0:forceV;
}  
 
  function snow() {  
 
	doc_width = document.body.offsetWidth; 
    doc_height = document.body.offsetHeight;  
 
    for (i = 0; i < densite; i++) {  
      yp[i] += vy[i]; 
      if (yp[i] > doc_height-20) { 
        xp[i] = (Math.random()*(doc_width-am[i]-30)); 
        yp[i] = 0; 
        vx[i] = (0.02 + Math.random()/10)*vitesseH; 
        vy[i] = (0.7 + Math.random())*vitesseV; 
      } 
 
      dx[i] += vx[i]; 
	  document.getElementById("flocon"+i).style.display="block"
      document.getElementById("flocon"+i).style.top = yp[i]+"px"; 
	  if (drift>0){
					xp[i]=((xp[i]+drift/10)>doc_width)?0:xp[i]+drift/10;
				}
	  if (drift<0){
					xp[i]=((xp[i]+drift/10)<0)?doc_width:xp[i]+drift/10;
	  }
      document.getElementById("flocon"+i).style.left = xp[i] + am[i]*Math.sin(dx[i])+"px"; 
    } 
  }

Mise en Oeuvre:
les flocons se placent dans un répertoire images.
Il suffit de lancer la fonction dans le onload ou domReady de la page ...

Pour eviter l'apparition impromptue de scrollbars il faut le css suivant sur le body:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
html, body {	height: 100%;
				width: 100%;
				overflow:hidden;
				margin:0;
				padding:0;
				}

et de préférence un doctype :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html>

limitations:

• Ce script est prévu pour fonctionner sur une page sans scrollbars.
  il faudra adapter pour recupérer les scrollheight et scrollwidth ...
• Certains hebergeur encapsulent les pages perso dans un framset
  un frame-buster ou un redirection sera alors nécessaire (cf http://www.developpez.net/forums/d84...ameset-parent/)
  il suffira en general de faire une redirection dans le href proposé dans la balise noframes:
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  if(top!=self){self.location.href='lienvers la page non framée'

[edit] Nouvelle version avec vent changeant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var changevent=true // pour ajouter la variation du sens et de l'intesité du vent
var vent =new Array(10,0,-10,-20,0,-10,-1,10,20,30,80,50,30,-10,-20);

mettre vent à false pour conserver un vent constant,
modifier l'array vent en valeurs et nombre d'éléments pour l'enchainement des directions et intensités
[/edit]


Je vais rajouter une variation aléatoire du vent de travers
[edit] La variation du vent latéral et de la vitesse de chute son intégrés au moyen de deux array de longueur différentes et de deux setInterval d'interval différent.
Modifier l'array chute en valeurs et longueur pour varier les enchainements
[edit]

[edit]
Petit rectification pour modifier l'extension des images à .gif pour IE6 et inférieur.
Seconde modif pour integrer le sniffer de Bovino
[/EDIT]

[edit]
on peut faire varier la taille des flocon en ajoutant cette ligne dans le init àprès le cloneNode

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		newpic.style.width=20-(Math.floor((Math.random()*8)))+"px"

[\edit]