Typewriter with backspacing and multiline writing-CodePudding

I'm quite new to HTML,CSS,JS and I'm currently working on making a web page project.

What I am trying to currently is animate something like this:

(with typewriter effect) "Hello people!" (backspace to clear text) "hello friends" (pause, typewriter cursor blinking)

(cursor goes to new line, starts writing in different text color/font)"This is my first big project..."

I have found an existing script on GitHub for typewriter/backspacing effect, and this is my code so far:

var typed = new Typed(".auto-type", {
  strings: ["Hello people!^1000", "Hello friends.^1000"],
  startDelay: 1000,
  typeSpeed: 170,
  backSpeed: 50,
  cursorChar: '\u25ae',
  autoInsertCss: true,
  smartBackspace: true,

})

<h1><span ></span></h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Would someone please give me a hint on how to do the finishing the new line with different color/font?

CodePudding user response：

you can use html tag in typed so you can :

use a third sentence with a <br/> inside for multiline
embed new sentence inside a span with a class manipulated in css for color

var typed = new Typed(".auto-type", {
  strings: ["Hello people!^1000", "Hello friends.^1000", "Hello friends.<br/><span class=\"my-big-project\">This is my first big project...</span>^1000"],
  startDelay: 1000,
  typeSpeed: 170,
  backSpeed: 50,
  cursorChar: '\u25ae',
  autoInsertCss: true,
  smartBackspace: true,

})

.my-big-project {
  color: blue;
}

<h1><span ></span></h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>