Schreibmaschine mit Backspace und mehrzeiliger Schrift

Ich bin ziemlich neu in HTML, CSS, JS und arbeite derzeit daran, ein Webseitenprojekt zu erstellen.

Was ich derzeit versuche, ist so etwas zu animieren:

(mit Schreibmaschineneffekt) "Hallo Leute!" (Rücktaste zum Löschen des Textes) „Hallo Freunde" (Pause, Schreibmaschinencursor blinkt)

(Cursor geht in eine neue Zeile, beginnt in einer anderen Textfarbe/Schriftart zu schreiben)"Das ist mein erstes großes Projekt..."

Ich habe auf GitHub ein vorhandenes Skript für Schreibmaschinen-/Backspace-Effekt gefunden, und dies ist mein bisheriger Code:

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 class="auto-type"></span></h1>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

Lösung des Problems

Sie können das HTML-Tag in eingegebener Form verwenden, damit Sie Folgendes tun können:

• Verwenden Sie einen dritten Satz mit einem <br/>Innenteil für mehrzeilig


• Betten Sie einen neuen Satz in eine Spanne mit einer Klasse ein, die in CSS für Farbe manipuliert wurde

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 class="auto-type"></span></h1>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>