This is how we pulled off our amazing 404 page.
Created
May 12, 2018 11:38
-
-
Save jajoosam/9bc41baed073645f0aad9d726bb8650d to your computer and use it in GitHub Desktop.
404 Kittens
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<h2 onclick="window.location.href='/add'" style="cursor:pointer;padding:20px; background-color:#4d4d4d; color:white; font-family:helvetica; max-width: 150px; border-radius:0.25em">GO BACK 👈</h2> | |
<form class="four-oh-four-form"> | |
<input type="text" class="404-input"> | |
</form> | |
<div class="terminal"> | |
<p class="prompt">Your filters didn' match any tweets. Type `why` to learn more</p> | |
<p class="prompt output new-output"></p> | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 === 'why' || val === 'WHY'){ | |
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("<p class='prompt'>"+ | |
"Your filters have to match at least one tweet which was posted in the last week.</p><p class='prompt'></p><p class='prompt'>Still think this is an error? tweet to @jajoosam</p>"); | |
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; | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment