Wie kann man die Typisierung und den Cursorffekt über mehrere Linien hinweg erreichen?
Posted: 25 Feb 2025, 10:53
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.
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.