98 lines
2.2 KiB
JavaScript
98 lines
2.2 KiB
JavaScript
function snow(awards, target_id) {
|
|
const COUNT = awards > 0 && awards < 10 ? awards * 10 : 100;
|
|
|
|
const masthead = document.getElementById(target_id);
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let width = masthead.clientWidth;
|
|
let height = masthead.clientHeight;
|
|
let i = 0;
|
|
let active = false;
|
|
|
|
function onResize() {
|
|
width = masthead.clientWidth;
|
|
height = masthead.clientHeight;
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
ctx.fillStyle = '#FFF';
|
|
|
|
let wasActive = active;
|
|
active = width > 600;
|
|
|
|
if (!wasActive && active)
|
|
requestAnimFrame(update);
|
|
}
|
|
|
|
const Snowflake = function () {
|
|
this.x = 0;
|
|
this.y = 0;
|
|
this.vy = 0;
|
|
this.vx = 0;
|
|
this.r = 0;
|
|
|
|
this.reset();
|
|
}
|
|
|
|
Snowflake.prototype.reset = function() {
|
|
this.x = Math.random() * width;
|
|
this.y = Math.random() * -height;
|
|
this.vy = 1 + Math.random() * 3;
|
|
this.vx = 0.5 - Math.random();
|
|
this.r = 1 + Math.random() * 2;
|
|
this.o = 0.5 + Math.random() * 0.5;
|
|
}
|
|
|
|
canvas.style.position = 'absolute';
|
|
canvas.style.left = canvas.style.top = '0';
|
|
|
|
let snowflakes = [], snowflake;
|
|
for (i = 0; i < COUNT; i++) {
|
|
snowflake = new Snowflake();
|
|
snowflake.reset();
|
|
snowflakes.push(snowflake);
|
|
}
|
|
|
|
function update() {
|
|
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
if (!active)
|
|
return;
|
|
|
|
for (i = 0; i < COUNT; i++) {
|
|
snowflake = snowflakes[i];
|
|
snowflake.y += snowflake.vy;
|
|
snowflake.x += snowflake.vx;
|
|
|
|
ctx.globalAlpha = snowflake.o;
|
|
ctx.beginPath();
|
|
ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
if (snowflake.y > height) {
|
|
snowflake.reset();
|
|
}
|
|
}
|
|
|
|
requestAnimFrame(update);
|
|
}
|
|
|
|
// shim layer with setTimeout fallback
|
|
window.requestAnimFrame = (function(){
|
|
return window.requestAnimationFrame ||
|
|
window.webkitRequestAnimationFrame ||
|
|
window.mozRequestAnimationFrame ||
|
|
function( callback ){
|
|
window.setTimeout(callback, 1000 / 60);
|
|
};
|
|
})();
|
|
|
|
onResize();
|
|
window.addEventListener('resize', onResize, false);
|
|
|
|
masthead.appendChild(canvas);
|
|
}
|
|
|
|
snow(1, 'frontpage'); // add snow to frontpage :)
|