This is how we pulled off our amazing 404 page.
A Pen by nclud team on CodePen.
This is how we pulled off our amazing 404 page.
A Pen by nclud team on CodePen.
<div class="container"> | |
<form class="four-oh-four-form"> | |
<input type="text" class="404-input"> | |
</form> | |
<div class="terminal"> | |
<p class="prompt">The page you requested cannot be found right meow. Try typing 'kittens'.</p> | |
<p class="prompt output new-output"></p> | |
</div> | |
</div> |
var inputReady = true; | |
var input = $('.404-input'); | |
input.focus(); | |
$('.container').on('click', function(e){ | |
input.focus(); | |
}); | |
input.on('keyup', function(e){ | |
$('.new-output').text(input.val()); | |
// console.log(inputReady); | |
}); | |
$('.four-oh-four-form').on('submit', function(e){ | |
e.preventDefault(); | |
var val = $(this).children($('.404-input')).val().toLowerCase(); | |
var href; | |
if (val === 'kittens'){ | |
showKittens(); | |
}else { | |
resetForm(); | |
} | |
}); | |
function resetForm(withKittens){ | |
var message = "Sorry that command is not recognized." | |
var input = $('.404-input'); | |
if (withKittens){ | |
$('.kittens').removeClass('kittens'); | |
message = "Huzzzzzah Kittehs!" | |
} | |
$('.new-output').removeClass('new-output'); | |
input.val(''); | |
$('.terminal').append('<p class="prompt">' + message + '</p><p class="prompt output new-output"></p>'); | |
$('.new-output').velocity( | |
'scroll' | |
), {duration: 100} | |
} | |
function showKittens(){ | |
$('.terminal').append("<div class='kittens'>"+ | |
"<p class='prompt'> ,----, ,----, ,---,</p>" + | |
"<p class='prompt'> ,--. ,/ .`| ,/ .`| ,--. ,`--.' |</p>" + | |
"<p class='prompt'> ,--/ /| ,---, ,` .' : ,` .' : ,---,. ,--.'| .--.--. | : :</p>" + | |
"<p class='prompt'>,---,': / ' ,`--.' | ; ; / ; ; / ,' .' | ,--,: : | / / '. ' ' ;</p>" + | |
"<p class='prompt'>: : '/ / | : : .'___,/ ,' .'___,/ ,' ,---.' | ,`--.'`| ' : | : /`. / | | |</p>" + | |
"<p class='prompt'>| ' , : | ' | : | | : | | | .' | : : | | ; | |--` ' : ;</p>" + | |
"<p class='prompt'>' | / | : | ; |.'; ; ; |.'; ; : : |-, : | \\ | : | : ;_ | | '</p>" + | |
"<p class='prompt'>| ; ; ' ' ; `----' | | `----' | | : | ;/| | : ' '; | \\ \\ `. ' : |</p>" + | |
"<p class='prompt'>: ' \\ | | | ' : ; ' : ; | : .' ' ' ;. ; `----. \\ ; | ;</p>" + | |
"<p class='prompt'>' : |. \\ | | ' ' : | ' : | ' : ;/| ' : | ; .' / /`--' / `--..`; </p>" + | |
"<p class='prompt'>| | '_\\.' ' : | ; |.' ; |.' | | \\ | | '`--' '--'. / .--,_ </p>" + | |
"<p class='prompt'>' : | ; |.' '---' '---' | : .' ' : | `--'---' | |`. </p>" + | |
"<p class='prompt'>; |,' '---' | | ,' ; |.' `-- -`, ; </p>" + | |
"<p class='prompt'>'---' `----' '---' '---`'</p>" + | |
"<p class='prompt'> </p></div>"); | |
var lines = $('.kittens p'); | |
$.each(lines, function(index, line){ | |
setTimeout(function(){ | |
$(line).css({ | |
"opacity": 1 | |
}); | |
textEffect($(line)) | |
}, index * 100); | |
}); | |
$('.new-output').velocity( | |
'scroll' | |
), {duration: 100} | |
setTimeout(function(){ | |
var gif; | |
$.get('http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=kittens', function(result){ | |
gif = result.data.image_url; | |
$('.terminal').append('<img class="kitten-gif" src="' + gif + '"">'); | |
resetForm(true); | |
}); | |
}, (lines.length * 100) + 1000); | |
} | |
function textEffect(line){ | |
var alpha = [';', '.', ',', ':', ';', '~', '`']; | |
var animationSpeed = 10; | |
var index = 0; | |
var string = line.text(); | |
var splitString = string.split(""); | |
var copyString = splitString.slice(0); | |
var emptyString = copyString.map(function(el){ | |
return [alpha[Math.floor(Math.random() * (alpha.length))], index++]; | |
}) | |
emptyString = shuffle(emptyString); | |
$.each(copyString, function(i, el){ | |
var newChar = emptyString[i]; | |
toUnderscore(copyString, line, newChar); | |
setTimeout(function(){ | |
fromUnderscore(copyString, splitString, newChar, line); | |
},i * animationSpeed); | |
}) | |
} | |
function toUnderscore(copyString, line, newChar){ | |
copyString[newChar[1]] = newChar[0]; | |
line.text(copyString.join('')); | |
} | |
function fromUnderscore(copyString, splitString, newChar, line){ | |
copyString[newChar[1]] = splitString[newChar[1]]; | |
line.text(copyString.join("")); | |
} | |
function shuffle(o){ | |
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); | |
return o; | |
}; |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> |
@import "bourbon"; | |
$green: #1ff042; | |
@include keyframes(cursor-blink) { | |
0% { | |
opacity: 0; | |
} | |
50% { | |
opacity: 1; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
body{ | |
background-color: black; | |
} | |
.four-oh-four{ | |
position: relative; | |
top: 0; | |
left: 0; | |
min-height: 100vh; | |
min-width: 100vw; | |
z-index: 2; | |
background-color: black; | |
transition: opacity 300ms ease-out; | |
background-position: center center; | |
background-repeat: no-repeat; | |
.dJAX_internal{ | |
opacity: 0.0; | |
} | |
form, input{ | |
position: fixed; | |
top: 0; | |
left: 0; | |
opacity: 0; | |
background-color: black; | |
} | |
} | |
.terminal{ | |
position: relative; | |
padding: 4rem; | |
.prompt{ | |
color: $green; | |
display: block; | |
font-family: 'AndaleMono', monospace; | |
font-weight: bold; | |
text-transform: uppercase; | |
font-size: 0.9em; | |
letter-spacing: 0.15em; | |
white-space: pre-wrap; | |
text-shadow: 0 0 2px rgba($green,0.75); | |
line-height: 1; | |
margin-bottom: 0.75em; | |
&:before { | |
content: '> '; | |
display: inline-block; | |
} | |
} | |
.new-output{ | |
display: inline-block; | |
&:after { | |
display: inline-block; | |
vertical-align: -0.15em; | |
width: 0.75em; | |
height: 1em; | |
margin-left: 5px; | |
background: $green; | |
box-shadow: 1px 1px 1px rgba($green,0.65), -1px -1px 1px rgba($green,0.65), 1px -1px 1px rgba($green,0.65), -1px 1px 1px rgba($green,0.65); | |
@include animation(cursor-blink 1.25s steps(1) infinite); | |
content: ''; | |
} | |
} | |
} | |
.kittens{ | |
p{ | |
letter-spacing: 0; | |
opacity: 0; | |
line-height: 1rem; | |
} | |
} | |
.kitten-gif{ | |
margin: 20px; | |
max-width: 300px; | |
} | |
.four-oh-four-form{ | |
opacity: 0; | |
position: fixed; | |
top: 0; | |
left: 0; | |
} |