Problema con l'effetto neve
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. :wink:
