Erklärung zu #004: horizontal bewegter Text

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 Code erstellt einen beweglichen Text, der horizontal über die Webseite gleitet. Der Text befindet sich in einem Container, der eine festgelegte Höhe und volle Seitenbreite hat. Der Text bewegt sich von rechts nach links und wieder zurück, wobei Geschwindigkeit, Startpunkt und Schriftgröße anpassbar sind.

- Zeile #19: Zeitdauer einstellen

- Zeile #20: Schriftgröße einstellen
- Zeile #21: Startpunkt einstellen

 

 

**Ausführliche Erklärung:**

1-4: Hier wird ein HTML-Element definiert, das den beweglichen Text und seinen Container enthält.

 

6-14: Der CSS-Teil beginnt mit der Definition des Containers "moving-text-container" in den Zeilen 8-13. Der Container ist relativ positioniert und hat eine feste Höhe von 70 Pixel und nimmt die volle Breite des Elternelements ein. Der "overflow: hidden;" Stil sorgt dafür, dass Inhalt, der über die Container-Grenzen hinausgeht, ausgeblendet wird.

 

16-22: Der bewegliche Text selbst wird in den Zeilen 16-22 definiert. Er ist absolut positioniert und wird über die "move-text"-Animation bewegt. Die Schriftgröße beträgt standardmäßig 40 Pixel, und der Text beginnt ganz rechts auf der Seite.

 

24-33: Die "move-text"-Animation wird in den Zeilen 24-33 definiert. Sie verwendet den "transform"-Eigenschaft, um den Text horizontal zu verschieben. Der Text startet bei 0% und wird in 10 Sekunden (linear) um 100% nach links verschoben. Die "infinite" Eigenschaft sorgt dafür, dass die Animation endlos wiederholt wird.

=============== C o d e ===============

<!-- HTML-Element zur Anzeige des beweglichen Texts -->
<div class="moving-text-container">
  <p class="moving-text">Geschwindigkeit, Startpunkt, Schriftgröße frei wählbar</p>
</div>

<!-- CSS-Stil für den beweglichen Text -->
<style>
  /* Container für den beweglichen Text */
  .moving-text-container {
    position: relative; /* Positionierungseigenschaft auf relativ setzen */
    height: 70px; /* Höhe des Containers auf 70 Pixel festlegen */
    width: 100%; /* Breite des Containers auf 100% des Elternelements setzen */
    overflow: hidden; /* Inhalt, der über die Container-Grenzen hinausgeht, ausblenden */
  }

  /* Der bewegliche Text selbst */
  .moving-text {
    position: absolute; /* Positionierungseigenschaft auf absolut setzen */
    animation: move-text 10s linear infinite; /* Animation "move-text" anwenden */
    font-size: 40px; /* Beispiel: Schriftgröße auf 40 Pixel festlegen */
    right: 0; /* Beispiel: Startpunkt der Animation ganz rechts */
  }

  /* Definition der "move-text" Animation */
  @keyframes move-text {
    0% {
      transform: translateX(0); /* Keine Verschiebung zu Beginn (0%) */
    }
    100% {
      transform: translateX(-100%); /* Verschiebung um 100% nach links am Ende (100%) */
    }
  }
</style>