Mediawiki:common.js
| Строка 1: | Строка 1: | ||
/* Снег */ | /* Снег */ | ||
(function(){ | (function(){ | ||
var canvas = document. | var canvas = document.createElement('canvas'); | ||
canvas.style.position = 'fixed'; | |||
canvas.style.left = '0'; | |||
canvas.style.top = '0'; | |||
canvas.style.width = '100%'; | |||
canvas.style.height = '100%'; | |||
canvas.style.pointerEvents = 'none'; | |||
canvas.style.zIndex = '9999'; | |||
document.body.appendChild(canvas); | |||
var ctx = canvas.getContext('2d'); | var ctx = canvas.getContext('2d'); | ||
var | var w = 0, h = 0, flakes = [], t = 0; | ||
function rand(a,b){ return Math.random()*(b-a)+a; } | |||
function initFlakes(){ | |||
flakes = []; | |||
var count = Math.max(40, Math.floor(w/20)); | |||
for(var i=0; i<count; i++){ | |||
flakes.push({ | |||
x: rand(0,w), | |||
y: rand(-h,h), | |||
r: rand(1,4), | |||
} | vx: rand(-0.3,0.3), | ||
vy: rand(0.5,1.2), | |||
swing: rand(0,Math.PI*2), | |||
swingSpeed: rand(0.01,0.03) | |||
}); | |||
} | } | ||
}); | } | ||
function resize(){ | |||
w = canvas.width = window.innerWidth; | |||
h = canvas.height = window.innerHeight; | |||
initFlakes(); | |||
} | |||
var | var raf = window.requestAnimationFrame || function(fn){ setTimeout(fn,16); }; | ||
loop | |||
t += 0. | function loop(){ | ||
ctx.clearRect(0,0, | t += 0.01; | ||
ctx.clearRect(0,0,w,h); | |||
ctx.fillStyle = 'rgba(255,255,255,0.85)'; | |||
ctx.beginPath(); | ctx.beginPath(); | ||
for(var i=0;i<flakes.length;i++){ | for(var i=0; i<flakes.length; i++){ | ||
var f = flakes[i]; | var f = flakes[i]; | ||
f.x += f.vx + Math. | f.swing += f.swingSpeed; | ||
f.y += f.vy | f.x += f.vx + Math.sin(f.swing)*0.5; | ||
if(f.y > | f.y += f.vy; | ||
if(f.x < - | |||
if(f.y > h + 5){ | |||
f.y = -5; | |||
f.x = rand(0,w); | |||
} | |||
if(f.x < -10) f.x = w+10; | |||
if(f.x > w+10) f.x = -10; | |||
ctx.moveTo(f.x,f.y); | ctx.moveTo(f.x,f.y); | ||
ctx.arc(f.x,f.y,f.r,0, | ctx.arc(f.x,f.y,f.r,0,2*Math.PI); | ||
} | } | ||
ctx.fill(); | ctx.fill(); | ||
raf(loop); | |||
} | |||
window.addEventListener('resize', resize); | |||
resize(); | |||
loop(); | |||
})(); | })(); | ||