This work by Harald Zigala is licensed under CC BY-NC-SA 4.0
Hier ist eine kurze und eine ausführliche Erklärung:
Kurze Erklärung:
Dieser HTML-Code erstellt eine animierte Textbewegung. Der Text beginnt bei (100px, 100px) und bewegt sich nach (500px, 300px) über einen Zeitraum von 4 Sekunden. Nach einer Verzögerung von 1 Sekunde wird die Animation durch JavaScript gestartet.
- Zeilen 5-7: Seitenrand wird entfernt, und das Scrollen wird deaktiviert.
- Zeilen 9-16: Die CSS-Regeln für den Text werden definiert. Der Text wird auf 100px von oben und 100px von links positioniert, die Schriftgröße beträgt 40px, und eine 4-sekündige Animationsdauer wird festgelegt.
- Zeilen 17-21: Optional können Stile für die Endposition definiert werden, hier (500px, 300px).
- Zeilen 26-37: Mit JavaScript wird die Bewegung nach einer Verzögerung von 1 Sekunde ausgelöst, indem der Klasse "moved-text" hinzugefügt wird.
Ausführliche Erklärung:
- Zeilen 5-7: In diesen Zeilen wird der Seitenrand entfernt und das Scrollen auf der Webseite deaktiviert, um sicherzustellen, dass die Seite nicht gescrollt werden kann.
- Zeilen 9-16: Hier werden die CSS-Regeln für den Text mit der Klasse "moving-text" definiert. Der Text wird mit `position: absolute` positioniert, beginnend bei (100px, 100px) von der oberen linken Ecke des sichtbaren Bereichs des Browsers. Die Schriftgröße wird auf 40px festgelegt, und die Eigenschaft `transition` wird verwendet, um eine Animationsdauer von 4 Sekunden mit einem sanften Ein- und Ausblenden zu definieren.
- Zeilen 17-21: Dieser Abschnitt ist optional und enthält Stile für die Endposition des Texts. Wenn die Animation abgeschlossen ist, wird der Text bei (500px, 300px) platziert. Diese Stile werden später angewendet, wenn die Klasse "moved-text" dem Textelement hinzugefügt wird.
- Zeile 29: Der HTML-Body enthält einen `<div>`-Container mit der Klasse "moving-text", in dem der bewegliche Text platziert wird.
- Zeilen 31-37: Dieser JavaScript-Code führt die Bewegung des Texts aus. Nach einer Verzögerung von 1 Sekunde wird das Textelement mit der Klasse "moving-text" ausgewählt, und die Klasse "moved-text" wird hinzugefügt, wodurch die Animation gestartet wird. Der Text bewegt sich von seiner Startposition zu seiner Endposition über die angegebene Animationsdauer von 4 Sekunden.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0; /* Entfernt den Seitenrand */
overflow: hidden; /* Verhindert das Scrollen auf der Seite */
}
.moving-text {
position: absolute; /* Absolute Positionierung */
top: 100px; /* Startposition - vertikale Position */
left: 100px; /* Startposition - horizontale Position */
font-size: 40px; /* Schriftgröße auf 40 Pixel erhöht */
transition: all 4s ease-in-out; /* Bewegungsanimation: 4 Sekunden */
}
/* Füge hier weitere Stile hinzu, um die Textgestaltung anzupassen */
/* Optional: Weitere Stile zur Anpassung des Texts */
/* Stile für Endposition (optional) */
.moved-text {
top: 500px; /* Endposition - vertikale Position */
left: 300px; /* Endposition - horizontale Position */
}
</style>
</head>
<body>
<div class="moving-text">Dieser Text wird angezeigt und bewegt</div>
</body>
<script>
// Füge JavaScript hinzu, um die Bewegung auszulösen (z.B., wenn die Seite geladen wird)
setTimeout(function() {
const textElement = document.querySelector('.moving-text');
textElement.classList.add('moved-text');
}, 1000); // Verzögerung in Millisekunden (hier: 1 Sekunde)
</script>
</html>
<br>
<br>
<br>
<br>
<br>
<br>
<br>