2

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.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
bensilverfox
  • 67
  • 1
  • 5
  • We are always glad to help and support new coders but you need to help yourself first. After [doing more research](https://meta.stackoverflow.com/q/261592/1011527), if you have a problem, please post what you've tried with a clear explanation of what isn't working and provide [a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). Read the ['How to Ask a good question' guide](http://stackoverflow.com/help/how-to-ask). Also, be sure to [take the tour](http://stackoverflow.com/tour) and read [this](https://meta.stackoverflow.com/q/347937/1011527) – Rory McCrossan Sep 11 '19 at 10:44
  • Noted! Thank you – bensilverfox Sep 11 '19 at 11:31
  • How do you know about *typewriters* at all? :) – biziclop Sep 12 '19 at 08:06
  • What do you mean Sir? – bensilverfox Sep 12 '19 at 11:27

2 Answers2

4

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).

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
0

The best lib doing this : https://typeitjs.com/ But please provide code if you need help like this

Rémy Testa
  • 897
  • 1
  • 11
  • 24
  • 1
    Proprietary software, YUCK! ;-) – Mr. Hugo Sep 11 '19 at 10:58
  • Right :( Using TypeIt for an open source or personal project is completely free. To use it in a commercial project, purchase a single license, or an unlimited license that'll never expire, no matter how many times you use it. – Rémy Testa Sep 11 '19 at 11:00
  • Saw this, but put off by the cost of it. But thanks!https://stackoverflow.com/questions/13325008/typewriter-effect-with-jquery this helped a lot, but doesn't quite fit what I need as it doesn't keep the two words at the start, and I'd rather it didn't loop. Would like to end on just the first two words after looping through all the phrases. – bensilverfox Sep 11 '19 at 11:20