Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Sep 7, 2016
Embed
What would you like to do?
Typewriters had been invented - animation
<div class="component">
<p class="typewriter js-typewriter">
Typewriters had been invented as early as 1714 by Henry Mill and reinvented in various forms throughout the 1800s. It was to be Sholes, however, who invented the first one to be commercially successful.
</p>
<button class="btn-replay" onclick="app.replay(event)">replay
</button>
</div>
window.app = (_ => {
let log = console.log.bind(console),
messageElement = document.querySelector('.js-typewriter'),
text = messageElement.innerText.trim();
let words = text.split(' ');
let work = [];
words.forEach(word => {
let splitWord = word.split('').map((char, index) => {
return `<i>${char}</i>`;
}).join('');
work.push(splitWord);
});
let formattedWords = work.map((word, index) => {
return `<span>${word}</span>`;
}).join(' ');
messageElement.innerHTML = formattedWords;
messageElement.classList.add('animate');
return {
replay: (event) => {
messageElement.classList.remove('animate');
messageElement.offsetHeight; // force reflow
setTimeout(_ => {
messageElement.classList.add('animate');
});
}
};
})();
$duration-typing: 300ms;
$duration-background: 1000ms;
$delay-unit: 100ms;
$color: #111;
html {
font-size: 20px;
@media(min-width: 600px) {
font-size: 30px;
}
}
body {
margin: 0;
font-family: Courier, Helvetica, sans-serif;
background: #fafafa;
}
.component {
padding: .5rem;
text-align: center;
margin: 0 auto;
max-width: 1000px;
.typewriter {
margin: .5rem;
padding: 1rem .5rem;
text-align: left;
font-weight: 300;
> span {
display: inline-block;
}
&.animate {
> span > i {
animation: typewriter $duration-typing forwards, background $duration-background forwards;
// animation: typewriter $duration-typing steps(1) forwards;
}
}
> span > i {
opacity: 0;
// display: inline-block;
color: $color;
font-style: normal;
font-size: 1em;
min-width: .4em;
border-radius: 2px;
@for $i from 1 through 30 {
&:nth-of-type(#{$i}) {
animation-delay: $i*$delay-unit;
}
}
}
}
.btn-replay {
padding: .5rem;
background: white;
border: 0;
box-shadow: 1px 1px 2px #777;
text-transform: uppercase;
cursor: pointer;
}
}
@keyframes typewriter {
50% {
transform: scale(1.4);
}
100% {
opacity: 1;
}
}
@keyframes background {
0% {
//text-shadow: 0 0 2rem $color; // expensive anim
background: rgba($color,.1);
//box-shadow: 0 0 4rem rgba($color,.9); // expensive anim
}
100% {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment