javascript - Multiline Typewriter Effect with Two Consistent Words

Question

I'm trying to create a typewriter effect that pauses at the end of a statement, deletes most of each statement but keeps the first two words, and finished with just those two words.

I've found a few things that almost do what I need, but not quite. I've found version that deletes the entire line and writes a new one, but I need two consistent words at the beginning.

For example (but not the actual text):

This is Stack Overflow. [delete "Stack Overflow" after delay]
This is JavaScript. [delete "JavaScript" after delay]
This is what I want. [delete "what I want" after delay and finish with "This Is" and a continuous flashing full-stop.]

In an ideal would the full-stop would act as the cursor rather than the usual horizontal line.

Answer 1

Solution 1: jQuery and Typed

Using jQuery and Typed, you can do this:

$(".element").typed({strings: [
    "I am a ^100Linux fan.^1000", 
    "I am an ^200UX expert.^2000", 
    "I am a ^200programmer.^1000", 
    "I am a ^200web developer.^500"
  ],
  typeSpeed: 20,
  callback: function(){ $(".typed-cursor").css('visibility','hidden');}
});

https://mattboldt.com/demos/typed-js/

You can use this software for free. It has an MIT license.

IMPORTANT This is an easy solution that requires a bulky library (jQuery) and has poor accessibility. Not very suitable for production, but a nice way to trow something together in a quick and dirty kind of way. If you are serious about using this effect I would go for the CSS only solution below.

---

Solution 2: CSS only

Using CSS, you can do something like this: https://css-tricks.com/snippets/css/typewriter-effect/. However, I would rather use CSS animation with states like this, so it does not rely on a monospaced font:

@keyframes words {
  0% {content: "I";}
  17% {content: "I ";}
  34% {content: "I a";}
  50% {content: "I am";}
  67% {content: "I am ";}
  84% {content: "I am a";}
  100% {content: "I am a ";}
}
@keyframes changeLetter {
  0% {content: "";}
  5% {content: "C";}
  10% {content: "CS";}
  15% {content: "CSS";}
  20% {content: "CSS ";}
  25% {content: "CSS f";}
  30% {content: "CSS fa";}
  35% {content: "CSS fan";}
  40% {content: "CSS fan.";}
  54% {content: "CSS fan.";}      
  55% {content: "CSS fan";}
  56% {content: "CSS fa";}
  57% {content: "CSS f";}
  58% {content: "CSS f";}
  59% {content: "CSS ";}
  60% {content: "CSS";}
  61% {content: "CS";}
  62% {content: "C";}
  62% {content: "";}
  75% {content: "n";}
  80% {content: "ne";}
  85% {content: "ner";}
  90% {content: "nerd";}
  95% {content: "nerd.";}
  100% {content: "nerd.";}
}
@keyframes cursor {
  0% {content: "";}
  50% {content: "|";}
  100% {content: "";}
}
.words::before {
  animation: words 1s linear 0s 1 normal forwards;
  content: "";
}
.letter-changer::before {
  animation: changeLetter 3s linear 1s 1 normal forwards;
  content: "";
}
.letter-changer::after {
  animation: cursor 0.6s linear 2.2s 1 normal forwards, cursor 0.6s linear 4s 3 normal forwards;
  content: "|";
}
.accessibility {
  width: 0; 
  display: inline-block; 
  overflow: hidden; 
  white-space:nowrap;
}

<span class="words"></span><span class="letter-changer"></span><span class="accessibility">I am a <s>CSS fan.</s>nerd.</span>