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:**
Der vorliegende Code erstellt einen animierten Text, der von unten nach oben scrollt und währenddessen ausblendet. Dies geschieht auf einer Webseite mit einem blauen Hintergrund. Der Text wird in einem begrenzten Container angezeigt und hat eine bestimmte Schriftgröße und Textfarbe.
- Zeile #56: hier wird der anzuzeigende Text eingegeben
**Ausführliche Erklärung:**
1-4: Diese Zeilen kennzeichnen den Anfang eines HTML-Dokuments und den Beginn des HEAD-Bereichs, in dem CSS-Styles definiert werden.
6-10: Hier wird der BODY-Stil festgelegt, der den Hintergrund schwarz einfärbt, das horizontale Scrollen verhindert und den Seitenrand entfernt.
12-20: Dieser Abschnitt beschreibt den Container, in dem der scrollende Text angezeigt wird. Der Container wird am unteren linken Rand des Bildschirms platziert und hat eine feste Breite und Höhe von 800x400 Pixel. Die `overflow`-Eigenschaft sorgt dafür, dass Inhalte innerhalb des Containers nicht sichtbar überlaufen.
22-30: Hier sind die Stile für den scrollenden Text definiert. Der Text hat eine schwarze Farbe und eine Schriftgröße von 30 Pixeln. Der Text wird ohne Zeilenumbrüche angezeigt, und es sind zwei Animationen aktiviert: "scroll-up" und "fade-out". Die "opacity" ist auf 1 eingestellt, was bedeutet, dass der Text zu Beginn vollständig sichtbar ist.
32-39: Die "scroll-up"-Animation wird definiert, um den Text von unten (100% der Höhe) nach oben (0% der Höhe) zu bewegen.
42-48: Die "fade-out"-Animation bewirkt einen allmählichen Übergang von vollständiger Sichtbarkeit (opacity 1) zu Unsichtbarkeit (opacity 0).
54-58: In diesem Abschnitt wird der HTML-Code für den scrollenden Text erstellt und im Dokument platziert. Der Text wird innerhalb des zuvor definierten Containers angezeigt.
Insgesamt bewirken die CSS-Animationen, dass der Text von unten nach oben scrollt und sich dabei ausblendet, was einen eleganten visuellen Effekt erzeugt.
<!DOCTYPE html>
<html>
<head>
<style>
body {
overflow: hidden;
background-color: cornflowerblue;
margin: 0;
}
.scrolling-container {
position: absolute;
bottom: 0;
left: 0;
width: 800px;
height: 400px;
overflow: hidden;
}
.scrolling-text {
color: black;
font-size: 30px;
white-space: nowrap;
animation: scroll-up 5s linear forwards, fade-out 5s linear 5s forwards;
opacity: 1;
}
@keyframes scroll-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="scrolling-container">
<div class="scrolling-text">
Text, der von unten nach oben durchrollt und verblasst ...
</div>
</div>
</body>
</html>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>