fistmas 2022: ui: snow effect
parent
06027a0ae4
commit
adbc67144d
|
@ -296,6 +296,65 @@ textarea, input[type=textbox], input[type=search] {
|
|||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
/* snow effect */
|
||||
|
||||
body {
|
||||
background-color: #1f1f1f;
|
||||
}
|
||||
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
|
||||
|
||||
body, html {
|
||||
overflow:hidden;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-family: 'Lato';
|
||||
font-weight: 700;
|
||||
font-size: 30px;
|
||||
text-transform: uppercase;
|
||||
color: #FFF;
|
||||
|
||||
}
|
||||
|
||||
.color {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
float: left
|
||||
}
|
||||
|
||||
.color p {
|
||||
position: relative;
|
||||
z-index: 1231231;
|
||||
text-align: center;
|
||||
line-height: 90vh;
|
||||
}
|
||||
|
||||
.color:nth-child(1){
|
||||
background-color: #F5624D;
|
||||
}
|
||||
|
||||
.color:nth-child(2){
|
||||
background-color: #CC231E;
|
||||
}
|
||||
|
||||
.color:nth-child(3){
|
||||
background-color: #34A65F;
|
||||
}
|
||||
|
||||
.color:nth-child(4){
|
||||
background-color: #0F8A5F;
|
||||
}
|
||||
|
||||
.color:nth-child(5){
|
||||
background-color: #235E6F;
|
||||
}
|
||||
|
||||
#snow {
|
||||
height: 100%;
|
||||
color: #FFF;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* award replacements */
|
||||
/* train awards */
|
||||
|
||||
|
|
|
@ -0,0 +1,97 @@
|
|||
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 :)
|
Loading…
Reference in New Issue