fistmas 2022: ui: snow effect

files/events/assets/css/blizzard.css

@@ -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 */
 

files/events/assets/js/snow.js

@@ -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 :)