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> 

I have added a blinking cursor to the ::after element. I got inspiration for this solution from: https://css-tricks.com/animating-the-content-property/ .

IMPORTANT This solution does not force you to double the size of your page by loading 100kb of jQuery. It is accessible for screen readers and search engines. It works with all fonts. And finally... the effect will run on any modern browser, even ones without javascript (or with javascript disabled).

Answer 2

最好的库： https : //typeitjs.com/但是如果您需要这样的帮助，请提供代码