I have this script that creates a "typing" effect when implemented. I want it to be able to delete the last word in the sentence, and then "retype" that section with a new word. So for example, something like "This is the original text" is typed out and then it deletes the last 4 letters in the same way it typed it out, and replaces it with "This is the original script", if that makes any sense.
typewriter.js:
var arrText = new Array("This is the original text"); // Array of text to be "typed"
var speed = 80; // Delay speed as text "types" out. Lower value = faster speed
var index = 0; // Start position for the typing effect
var arrLength = arrText[0].length; // Length of the text array
var textPos = 0; // Initialize text position
var contents = ""; // Initialize contents variable
function typewriter() {
// Aqcuire the destination of the typewriter ID
var destination = document.getElementById("typewriter");
// Initiate the innerHTML of the destination, with an initial carat value
destination.innerHTML =
contents +
arrText[index].substring(0, textPos) +
"<span class='blink'>█<span>";
// If textPos hasn't reached the array length, increase textPos value
if (textPos++ != arrLength) {
setTimeout("typewriter()", speed);
} else {
// Subtract text code here???
}
}
// Wait specified time (in milliseconds) before starting script
setTimeout(typewriter, 500);
index.html:
<div id="typewriter"></div>
style.css
.blink {
animation: blink-animation 1400ms steps(2, start) infinite;
-webkit-animation: blink-animation 1400ms steps(2, start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}