diff --git a/files/events/assets/css/blizzard.css b/files/events/assets/css/blizzard.css index 98a55f963..c474f56c4 100644 --- a/files/events/assets/css/blizzard.css +++ b/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 */ diff --git a/files/events/assets/js/snow.js b/files/events/assets/js/snow.js new file mode 100644 index 000000000..a133e85bf --- /dev/null +++ b/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 :)