<div id="type"></div>
<div class="type2">
<span class="p1">Abraham Lincoln</span>
<span class="p2">George Washington</span>
<span class="p3">Ronald Reagan</span>
<span class="p4">John F Kennedy</span>
</div>
#type {
font-size: 2rem;
padding: 10px;
background: #f9f9f9;
margin: 2rem 2rem 1rem;
display: table;
min-width: 1rem;
min-height: 2.5rem;
font-family: monospace;
}
/*
Flashing caret
#type:after {
content: "|";
margin-left: 10px;
animation: caret 0.3s infinite;
opacity: 0;
}
@keyframes caret {
50% {
opacity: 1;
}
}
*/
/* CSS Version */
.type2 {
position: relative;
margin: 0 2rem;
}
.type2 span {
font-size: 2rem;
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
padding: 10px 10px 10px 0;
text-indent: 10px;
background: #f9f9f9;
font-family: monospace;
display: flex;
width: 0;
animation: typing 10s steps(15) infinite 0s;
}
span.p2 {
animation: typing1 10s steps(18) infinite 2.5s;
}
span.p3 {
animation: typing2 10s steps(13) infinite 5s;
}
span.p4 {
animation: typing3 10s steps(14) infinite 7.5s;
}
@keyframes typing {
12.5% {
width: 15ch;
}
25% {
width: 0;
}
}
@keyframes typing1 {
12.5% {
width: 18ch;
}
25% {
width: 0;
}
}
@keyframes typing2 {
12.5% {
width: 13ch;
}
25% {
width: 0;
}
}
@keyframes typing3 {
12.5% {
width: 14ch;
}
25% {
width: 0;
}
}
(function (d) {
"use strict";
const typeText = [
"Abraham Lincoln",
"George Washington",
"Ronald Reagan",
"John F Kennedy"
];
const getSegment = (strg, position) =>
strg.split("").slice(0, position).join("");
const myElement = d.getElementById("type");
var timeLoop;
var pos = 0;
var increment = 1;
var counter = 0;
function textLoop() {
myElement.textContent = getSegment(typeText[counter], pos);
pos += increment;
if (pos === typeText[counter].length) {
increment = -increment;
}
if (pos === 0) {
increment = 1;
counter++;
if (counter === typeText.length) {
counter = 0;
}
}
timeLoop = setTimeout(textLoop, 80);
}
textLoop();
})(document);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.