<div id="text-spot">
<div id="inner-text">
</div>
<form id="custom-text-form">
<input type="text" id="custom-text" placeholder="customize this text">
<input type="submit" value="go!">
</form>
</div>
@keyframes dash {
0% {
transform: skew(-30deg,0deg) translateX(300%) scale(.8);
opacity: 1;
}
40% {
transform: skew(10deg,0deg) translateX(100%) scale(.9);
}
60% {
transform: skew(10deg,0deg) translateX(-10px) scale(1.2);
}
70% {
transform: skew(0,0deg) translateX(0) scale(1.3);
}
75% {
transform: skew(0,0deg) translateX(0) scale(1.3);
}
90% {
transform: skew(0,0deg) translateX(0) scale(.85);
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes done-animating {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
body {
background: #0b0b25;
}
#inner-text {
position: relative;
z-index: 1;
}
#inner-text.done-animating {
animation: done-animating 300ms ease-in;
}
#text-spot {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.letter {
display: inline-block;
font-size: 120px;
color: #ffdc2e;
letter-spacing: 10px;
font-family: 'Luckiest Guy';
}
.letter.animate {
animation: dash 500ms ease-in forwards;
opacity: 0;
}
document.addEventListener('DOMContentLoaded', function () {
function drawText(word) {
word = word || 'ZOOM!';
var wordArray = word.split('');
var innerTextElement = document.getElementById('inner-text');
innerTextElement.innerHTML = '';
innerTextElement.classList.remove('done-animating');
wordArray.forEach(function (letter, index) {
var span = document.createElement('span');
span.textContent = letter;
span.className = 'letter animate';
span.style['animation-delay'] = (300 * index) + 'ms';
innerTextElement.appendChild(span);
if (index === wordArray.length - 1) {
span.addEventListener('animationend', function () {
innerTextElement.classList.add('done-animating');
});
}
});
}
document.getElementById('custom-text-form').addEventListener('submit', function (e) {
e.preventDefault();
e.stopPropagation();
drawText(document.getElementById('custom-text').value);
});
drawText();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.