Wie kann man die Typisierung und den Cursorffekt über mehrere Linien hinweg erreichen? ⇐ JavaScript

[Anonymous]

Ich habe versucht, einen Titel in HTML in 3 separate Zeilen aufzuteilen und einen Typisierungseffekt auf sie anzuwenden. Jede Zeile wäre unsichtbar (d. H. Schwarz, weil das die Hintergrundfarbe ist), bis sich der Cursor daran vorbei bewegt und sie weiß wird. Nachdem CSS+JS angewendet wurde, traten mehrere Probleme auf: < /p>

• Der Cursor verschwand; < /li>
  Das letzte Zeichen in jeder Zeile bleibt schwarz.

Ich habe versucht, Github Copilot und Chatgpt zu fragen, aber sie waren nicht super hilfreich ... wie kann ich diese Probleme beheben? < Br />

Code: Select all

document.addEventListener("DOMContentLoaded", function() {
const lines = [{
element: document.getElementById("line1"),
text: "Lorem ipsum dolor"
},
{
element: document.getElementById("line2"),
text: "sit"
},
{
element: document.getElementById("line3"),
text: "amet, consectetur adipiscing elit."
}
];

let currentLine = 0;
let currentChar = 0;

function type() {
if (currentLine < lines.length) {
const line = lines[currentLine];
const text = line.text;
const cursor = document.createElement("span");
cursor.className = "cursor";
line.element.appendChild(cursor);

function typeChar() {
if (currentChar < text.length) {
line.element.childNodes[currentChar].style.color = "white";
currentChar++;
cursor.style.left = `${currentChar * 0.6}em`;
setTimeout(typeChar, 40); // Typing speed
} else {
line.element.childNodes[currentChar - 1].style.color = "white";
// Ensure last character is visible/white

line.element.removeChild(cursor);
currentLine++;
currentChar = 0;
setTimeout(type, 20); // Delay before starting the next line
}
}

for (let i = 0; i < text.length; i++) {
const span = document.createElement("span");
span.textContent = text[i];
span.style.color = "black"; // Initially black
line.element.appendChild(span);
}

line.element.removeChild(line.element.firstChild);
typeChar();
} else {
// Add blinking cursor to the end of the last line
const lastLine = lines[lines.length - 1].element;
const cursor = document.createElement("span");
cursor.className = "cursor";
lastLine.appendChild(cursor);
cursor.style.left = `${lines[lines.length - 1].text.length * 0.6}em`;
}
}

type();
});< /code>
.top-container h1 {
font-size: 5rem;
font-weight: 950;
line-height: 1.2;
word-wrap: break-word;
white-space: nowrap;
overflow: hidden;
background-color:black;
}

.top-container h1 .text {
display: inline-block;
color: black;
/* Initially invisible */
position: relative;
}

.cursor {
display: inline-block;
width: 0.15em;
background-color: white;
animation: blink-caret 0.75s step-end infinite;
position: absolute;
}

@keyframes blink-caret {
50% {
background-color: transparent;
}
}

/* Button Container */
.button-container {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
margin-top: 5%;
margin-top: 200px;
}< /code>


Lorem ipsum dolor

sit

amet, consectetur adipiscing elit.