Fargo-inspired 404 page for DailyUI #008
Snow loosely based on http://codepen.io/loktar00/pen/CHpGo and http://php.quicoto.com/snow-html-canvas/
A Pen by Nathaniel Watson on CodePen.
Fargo-inspired 404 page for DailyUI #008
Snow loosely based on http://codepen.io/loktar00/pen/CHpGo and http://php.quicoto.com/snow-html-canvas/
A Pen by Nathaniel Watson on CodePen.
.content | |
canvas.snow#snow | |
.main-text | |
h1 Aw jeez. | |
br | |
| That page has gone missing. | |
a.home-link(href='#') Hitch a ride back home. | |
.ground | |
.mound | |
.mound_text 404 | |
.mound_spade |
(function() { | |
function ready(fn) { | |
if (document.readyState != 'loading'){ | |
fn(); | |
} else { | |
document.addEventListener('DOMContentLoaded', fn); | |
} | |
} | |
function makeSnow(el) { | |
var ctx = el.getContext('2d'); | |
var width = 0; | |
var height = 0; | |
var particles = []; | |
var Particle = function() { | |
this.x = this.y = this.dx = this.dy = 0; | |
this.reset(); | |
} | |
Particle.prototype.reset = function() { | |
this.y = Math.random() * height; | |
this.x = Math.random() * width; | |
this.dx = (Math.random() * 1) - 0.5; | |
this.dy = (Math.random() * 0.5) + 0.5; | |
} | |
function createParticles(count) { | |
if (count != particles.length) { | |
particles = []; | |
for (var i = 0; i < count; i++) { | |
particles.push(new Particle()); | |
} | |
} | |
} | |
function onResize() { | |
width = window.innerWidth; | |
height = window.innerHeight; | |
el.width = width; | |
el.height = height; | |
createParticles((width * height) / 10000); | |
} | |
function updateParticles() { | |
ctx.clearRect(0, 0, width, height); | |
ctx.fillStyle = '#f6f9fa'; | |
particles.forEach(function(particle) { | |
particle.y += particle.dy; | |
particle.x += particle.dx; | |
if (particle.y > height) { | |
particle.y = 0; | |
} | |
if (particle.x > width) { | |
particle.reset(); | |
particle.y = 0; | |
} | |
ctx.beginPath(); | |
ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false); | |
ctx.fill(); | |
}); | |
window.requestAnimationFrame(updateParticles); | |
} | |
onResize(); | |
updateParticles(); | |
window.addEventListener('resize', onResize); | |
} | |
ready(function() { | |
var canvas = document.getElementById('snow'); | |
makeSnow(canvas); | |
}); | |
})(); |
$col-sky-top: #bbcfe1; | |
$col-sky-bottom: #e8f2f6; | |
$col-fg: #5d7399; | |
$col-blood: #dd4040; | |
$col-ground: #f6f9fa; | |
@mixin trees($direction, $size) { | |
$shadow: (); | |
@for $i from 1 through 16 { | |
$space: $size * 1.2; | |
$rand: (random(20)/10 - 1) * 50px; | |
$shadow: append($shadow, ($direction * $i * $space + $rand) (($direction * -$i * $space) + $rand) 15px lighten($col-fg, random(20) + 10%), comma); | |
} | |
box-shadow: $shadow; | |
} | |
html, | |
body { | |
height: 100%; | |
min-height: 450px; | |
font-family: 'Dosis', sans-serif; | |
font-size: 32px; | |
font-weight: 500; | |
color: $col-fg; | |
} | |
.content { | |
height: 100%; | |
position: relative; | |
z-index: 1; | |
background-color: mix($col-sky-top, $col-sky-bottom); | |
background-image: linear-gradient(to bottom, $col-sky-top 0%, $col-sky-bottom 80%); | |
overflow: hidden; | |
} | |
.snow { | |
position: absolute; | |
top: 0; | |
left: 0; | |
pointer-events: none; | |
z-index: 20; | |
} | |
.main-text { | |
padding: 20vh 20px 0 20px; | |
text-align: center; | |
line-height: 2em; | |
font-size: 5vh; | |
} | |
.home-link { | |
font-size: 0.6em; | |
font-weight: 400; | |
color: inherit; | |
text-decoration: none; | |
opacity: 0.6; | |
border-bottom: 1px dashed transparentize($col-fg, 0.5); | |
&:hover { | |
opacity: 1; | |
} | |
} | |
.ground { | |
height: 160px; | |
width: 100%; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
background: $col-ground; | |
box-shadow: 0 0 10px 10px $col-ground; | |
$treeSize: 250px; | |
&:before, | |
&:after { | |
// Trees | |
content: ''; | |
display: block; | |
width: $treeSize; | |
height: $treeSize; | |
position: absolute; | |
top: -$treeSize/4; | |
z-index: -1; | |
background: transparent; | |
transform: scaleX(0.2) rotate(45deg); | |
} | |
&:after { | |
left: 50%; | |
margin-left: -$treeSize / 1.5; | |
@include trees(-1, $treeSize); | |
} | |
&:before { | |
right: 50%; | |
margin-right: -$treeSize / 1.5; | |
@include trees(1, $treeSize); | |
} | |
} | |
.mound { | |
margin-top: -80px; | |
font-weight: 800; | |
font-size: 180px; | |
text-align: center; | |
color: $col-blood; | |
pointer-events: none; | |
$from-top: 50px; | |
&:before { | |
$w: 600px; | |
$h: 200px; | |
content: ''; | |
display: block; | |
width: $w; | |
height: $h; | |
position: absolute; | |
left: 50%; | |
margin-left: -$w/2; | |
top: $from-top; | |
z-index: 1; | |
border-radius: 100%; | |
background-color: $col-sky-bottom; | |
background-image: linear-gradient(to bottom, lighten($col-sky-top, 10%), $col-ground 60px); | |
} | |
&:after { | |
// Blood | |
$w: 28px; | |
$h: 6px; | |
content: ''; | |
display: block; | |
width: $w; | |
height: $h; | |
position: absolute; | |
left: 50%; | |
margin-left: - 150px; | |
top: $from-top + 18px; | |
z-index: 2; | |
background: $col-blood; | |
border-radius: 100%; | |
transform: rotate(-15deg); | |
box-shadow: -($w * 2) ($h * 2) 0 1px $col-blood, -($w * 4.5) ($h) 0 2px $col-blood, -($w * 7) ($h * 4) 0 3px $col-blood, | |
} | |
} | |
.mound_text { | |
transform: rotate(6deg); | |
} | |
.mound_spade { | |
$handle-height: 30px; | |
display: block; | |
width: 35px; | |
height: 30px; | |
position: absolute; | |
right: 50%; | |
top: 42%; | |
margin-right: -250px; | |
z-index: 0; | |
transform: rotate(35deg); | |
background: $col-blood; | |
&:before, | |
&:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
} | |
&:before { | |
width: 40%; | |
height: $handle-height; | |
bottom: 98%; | |
left: 50%; | |
margin-left: -20%; | |
background: $col-blood; | |
} | |
&:after { | |
width: 100%; | |
height: 30px; | |
top: -$handle-height - 25px; | |
left: 0%; | |
box-sizing: border-box; | |
border: 10px solid $col-blood; | |
border-radius: 4px 4px 20px 20px; | |
} | |
} |
<link href="https://fonts.googleapis.com/css?family=Dosis:400,300,500,800" rel="stylesheet" /> |