Ciao a tutti, ho scaricato da un sito web il seguente codice.
Funziona perfettamente, ma vorrei impostare quest'effetto come sfondo.
Ecco le pagine.
snow.js
Codice:
var bgflakes = new Array();
var fgflakes = new Array();
var bgFlakeCount = 200;
var fgFlakeCount = 50;
var frameCount = 0;
var wind = 0;
var dwidth;

function init() {
	dwidth = $(document).width();
	bgcanvas = document.getElementById("bgcanvas");
	fgcanvas = document.getElementById("fgcanvas");
	if (!bgcanvas.getContext) return; // bye IE!
	for (i=0;i<bgFlakeCount;i++) {
		bgflakes.push(new Flake(bgcanvas.width, bgcanvas.height,0,3));
	}
	for (i=0;i<fgFlakeCount;i++) {
		fgflakes.push(new Flake(fgcanvas.width, fgcanvas.height,0.2,4));
	}
	setInterval(draw,50);
}

function setWind() {
	if (!orientation) { 
		var mx = mouseX - dwidth/2;
		wind = (mx/dwidth)*3;
	} else {
		wind = parseFloat(orientX)*3;
	}
	if (isNaN(wind)) {
		wind = 0;
	}
}

function draw() {  
	frameCount += 1;
	g = bgcanvas.getContext("2d");
	h = fgcanvas.getContext("2d");
	g.fillStyle = "black";
	g.fillRect(0,0,bgcanvas.width,bgcanvas.height);
	h.clearRect(0,0,fgcanvas.width,fgcanvas.height);
	setWind();
	for (i=0;i<bgFlakeCount;i++) {
		bgflakes[i].move(frameCount, wind);
		bgflakes[i].draw(g);
	}
	for (i=0;i<fgFlakeCount;i++) {
		fgflakes[i].move(frameCount, wind);
		fgflakes[i].draw(h);
	}
}

function Flake(w,h,a,s) {
	this.canvasWidth = "100%";
	this.canvasHeight = "100%";
	this.x = 200;
	this.y = Math.random()*-1*h;
	this.alfa = Math.random()*0.5 + a;
	this.color = "rgba(255,255,255,"+this.alfa+")";
	this.speed = Math.random();
	this.size = s - this.speed - this.alfa;
	this.amp = Math.random() * 2;
	this.shift = Math.random() * 25 + 25;
	if (Math.random()>0.5) this.shift*=-1;
	this.drift = Math.random() - 0.5;
	
	this.draw = function(g){
		g.fillStyle = this.color;
		g.beginPath();
		g.arc(this.x, this.y, this.size, 0, Math.PI*2, true);
		g.closePath();
		g.fill();
	};
	
	this.move = function(f, wind) {
		this.y += this.speed;
		this.x += Math.cos((f)/this.shift) * this.amp + this.drift + wind;
		if (this.y>this.canvasHeight) {
			this.restart();
		}
	};
	
	this.restart = function(){
		this.y = -20;
		this.shift = Math.random() * 25 + 25;
		this.x = 200;
	};
}
snow.html
Codice HTML:
<!DOCTYPE html>
<head>
	<title>Snow</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<script src="snow.js" type="text/javascript"/></script>
</head>
<body onload="init();">
	<canvas id="bgcanvas" width="410" height="316"  style="position:absolute;z-index:2"></canvas>
	<canvas id="fgcanvas" width="410" height="316"  style="position:absolute;z-index:4"></canvas>
	<script type="text/javascript">
		var mouseX, mouseY, orientation, orientX;

		jQuery(document).ready(function(){
			// mouse
			$(document).mousemove(function(e){
				mouseX = e.pageX;
				mouseY = e.pageY;
			}); 
			
			// orientation on firefox
			function handleOrientation(orientData) { 
				orientation = true; 
				orientX = orientData.x;
			}
			window.addEventListener("MozOrientation", handleOrientation, true);
			
			// orientation on mobile safari
			if (window.DeviceMotionEvent!=undefined) {
				orientation = true;
				window.ondevicemotion = function(event) {
					orientX = event.accelerationIncludingGravity.x;
				};
			}
		});
	</script>
</body>
Potete scaricare i due file da qui o vedere il risultato qui.
Grazie.