Currently the animation begins to type out each line, deletes then moves on typing the next. Trying to freeze the animation after typing out the last line "Text Line 3" and stay as that. Which part of the code do I change to achieve that?
This typewriter effect uses JavaScript instead of CSS. Please help. Thank you!!!
var _CONTENT = [ "Text Line 1", "Text Line 2", "Text Line 3"
];
var _PART = 0;
var _PART_INDEX = 0;
var _INTERVAL_VAL;
var _ELEMENT = document.querySelector("#text");
var _CURSOR = document.querySelector("#cursor");
function Type() {
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
if(text === _CONTENT[_PART]) {
_CURSOR.style.display = 'none';
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 50);
}, 1000);
}
}
function Delete() {
var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
_ELEMENT.innerHTML = text;
_PART_INDEX--;
if(text === '') {
clearInterval(_INTERVAL_VAL);
to the next
if(_PART == (_CONTENT.length - 1))
_PART = 0;
else
_PART++;
_PART_INDEX = 0;
setTimeout(function() {
_CURSOR.style.display = 'inline-block';
_INTERVAL_VAL = setInterval(Type, 100);
}, 200);
}
}
_INTERVAL_VAL = setInterval(Type, 100);
#container {
text-align: center;
}
#text {
display: inline-block;
vertical-align: middle;
color: orange;
letter-spacing: 2px;
}
#cursor {
display: inline-block;
vertical-align: middle;
width: 3px;
height: 50px;
background-color: blue;
animation: blink .75s step-end infinite;
}
@keyframes blink {
from, to {
background-color: transparent
}
50% {
background-color: blue;
}
}
<div id="container"><div id="text"></div><div id="cursor"></div></div>