404 Page

404-page.markdown

404 Page

Simple 404 page

A Pen by Wahyu Arif P on CodePen.

License.

index.pug

.text__error(data-text='404 page not found')
.text__link
	a(data-text='click here to go home')

script.js

function setCharAt(str,index,chr) {
    if(index > str.length-1) return str;
    return str.substr(0,index) + chr + str.substr(index+1);
}

var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');

var progress404 = 0;
var total404 = $('.text__error').data('text').length;

var progressLink = 0;
var totalLink = $('.text__link a').data('text').length;

var scrambleInterval = setInterval(function() {
	var string404 = $('.text__error').data('text');
	var stringLink = $('.text__link a').data('text');
	
	for(var i = 0; i < total404; i++) {
		if(i >= progress404) {
			string404 = setCharAt(string404, i, characters[Math.round(Math.random() * (characters.length - 1))]);
		} 
	}
	
	for(var i = 0; i < totalLink; i++) {
		if(i >= progressLink) {
			stringLink = setCharAt(stringLink, i, characters[Math.round(Math.random() * (characters.length - 1))]);
		} 
	}
	
	$('.text__error').text(string404);
	$('.text__link a').text(stringLink);
}, 1000 / 60);

setTimeout(function() {
	var revealInterval = setInterval(function() {
		if(progress404 < total404) {
			progress404++;
		}else if(progressLink < totalLink) {
			progressLink++;
		}else{
			clearInterval(revealInterval);
			clearInterval(scrambleInterval);
		}
	}, 50);
}, 1000);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

*,
*:before,
*:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: #fff;
}

html {
	font-size: 62.5%;
}

body {
	background-color: #000;
	font-family: 'Hack', monospace;
}

a {
	text-decoration: none;
	cursor: pointer;
	
	&:hover {
		text-decoration: underline;
	}
}

.text__error,
.text__link {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	text-align: center;
}

.text__error {
	margin-top: -35px;
	height: 30px;
	line-height: 30px;
	font-size: 2rem;
}

.text__link {
	margin-top: 5px;
	height: 20px;
	line-height: 20px;
	font-size: 1.4rem;
}