<div id="container">
<div id="input"></div>
<input type="text" id="hiddenInput">
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
body {
background-color: #000000;
font-family: 'Roboto Condensed', sans-serif;
font-size: 40px;
color: #ffffff;
}
#hiddenInput {
font-size: 40px;
font-family: 'Roboto Condensed', sans-serif;
background-color: #808080;
position: absolute;
opacity: 0.4;
margin-top: -22px;
margin-left: -125px;
opacity: 0;
filter: alpha(opacity = 0);
}
#container {
position: absolute;
top: 80px;
left: 50%;
}
#input {
position: absolute;
margin-top: -20px;
margin-left: -120px;
}
.letterContainer {
display: inline;
white-space: nowrap;
}
.letterStatic {
display: inline;
}
.letterAnimTop {
display: inline;
position: absolute;
-webkit-animation: dropTop .1s ease;
-moz-animation: dropTop .1s ease;
}
.letterAnimBottom {
display: inline;
position: absolute;
-webkit-animation: dropBottom .1s ease;
-moz-animation: dropBottom .1s ease;
}
.blink {
position: static;
top: -5px;
-webkit-animation: blink 0.3s ease 0 infinite alternate;
-moz-animation: blink 0.3s ease 0 infinite alternate;
}
@-moz-keyframes blink {
from { opacity: 0 }
to { opactiy: 1 }
}
@-webkit-keyframes blink {
from { opacity: 0 }
to { opactiy: 1 }
}
@-moz-keyframes dropTop {
from {
-moz-transform: translateX(0) translateY(-20px) translateZ(20px) rotateX(90deg);
transform: translateX(0) translateY(-20px) translateZ(20px) rotateX(90deg);
}
to {
-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);
transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);
}
}
@-moz-keyframes dropBottom {
from {
-moz-transform: translateY(20px) translateZ(20px) rotateX(-90deg);
transform: translateY(20px) translateZ(20px) rotateX(-90deg);
}
to {
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
@-webkit-keyframes dropTop {
from { -webkit-transform: translateX(0) translateY(-20px) translateZ(20px) rotateX(90deg); }
to { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg); }
}
@-webkit-keyframes dropBottom {
from { -webkit-transform: translateY(20px) translateZ(20px) rotateX(-90deg); }
to { -webkit-transform: rotateX(0deg); }
}
var input;
var cursor;
var hiddenInput;
var content = [];
var lastContent = "", targetContent = "";
var inputLock = false;
var autoWriteTimer;
var isMobile, isIE;
window.onload = function() {
isMobile = navigator && navigator.platform && navigator.platform.match(/^(iPad|iPod|iPhone)$/);
isIE = (navigator.appName == 'Microsoft Internet Explorer');
input = document.getElementById('input');
hiddenInput = document.getElementById('hiddenInput');
hiddenInput.focus();
cursor = document.createElement('cursor');
cursor.setAttribute('class', 'blink');
cursor.innerHTML = "|";
if (!isMobile && !isIE) input.appendChild(cursor);
function refresh() {
inputLock = true;
if (targetContent.length - lastContent.length == 0) return;
var v = targetContent.substring(0, lastContent.length + 1);
content = [];
var blinkPadding = false;
for (var i = 0; i < v.length; i++) {
var l = v.charAt(i);
var d = document.createElement('div');
d.setAttribute('class', 'letterContainer');
var d2 = document.createElement('div');
var animClass = (i % 2 == 0) ? 'letterAnimTop' : 'letterAnimBottom';
var letterClass = (lastContent.charAt(i) == l) ? 'letterStatic' : animClass;
if (letterClass != 'letterStatic') blinkPadding = true;
d2.setAttribute('class', letterClass);
d.appendChild(d2);
d2.innerHTML = l;
content.push(d);
}
input.innerHTML = '';
for (var i = 0; i < content.length; i++) {
input.appendChild(content[i]);
}
cursor.style.paddingLeft = (blinkPadding) ? '22px' : '0';
if (!isMobile && !isIE) input.appendChild(cursor);
if (targetContent.length - lastContent.length > 1) setTimeout(refresh, 150);
else inputLock = false;
lastContent = v;
}
if (document.addEventListener) {
document.addEventListener('touchstart', function(e) {
clearInterval(autoWriteTimer);
targetContent = lastContent;
}, false);
document.addEventListener('click', function(e) {
clearInterval(autoWriteTimer);
targetContent = lastContent;
hiddenInput.focus();
}, false);
if (!isIE) {
// Input event is buggy on IE, so don't bother
// (https://msdn.microsoft.com/en-us/library/gg592978(v=vs.85).aspx#feedback)
// We will use a timer instead (below)
hiddenInput.addEventListener('input', function(e) {
e.preventDefault();
targetContent = hiddenInput.value;
if (!inputLock) refresh();
}, false);
} else {
setInterval(function() {
targetContent = hiddenInput.value;
if (targetContent != lastContent && !inputLock) refresh();
}, 100);
}
}
hiddenInput.value = "";
autoWriteTimer = setTimeout(function() {
if (lastContent != "") return;
targetContent = "type something...";
refresh();
}, 2000);
}