Как достичь набора текста и эффекта курсора по нескольким линиям? ⇐ Javascript

[Anonymous]

Я пытался разделить заголовок в HTML на 3 отдельные строки и применить к ним эффект печати. Каждая строка была бы невидимой (то есть черным, потому что это цвет фона), пока курсор не пройдет мимо, не станет белым. После применения CSS+JS произошло несколько проблем: < /p>

Курсор исчез; черный. бренд />

Код: Выделить всё

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.

Подробнее здесь: https://stackoverflow.com/questions/794 ... iple-lines