Laufschrift mit Bildern

[Mr_Frost]

Hallo zusammen,

ich versuche gerade, eine Laufschrift in einem definierten Bereich (Box) zu erstellen. Dabei stieß ich im Internet auf einen script, den ich weiter bearbeitet habe. Im Grunde genommen funktioniert die Laufschrift einwandfrei. Aber ein gibt einige Dinge, die ich nicht lösen kann:

1. Die Laufschrift wird rechts eingeblendet. Ich benötige aber eine Lösung, bei der alle sichtbaren Bilder direkt schon in der Box dargestellt werden und dann beginnen zu laufen
2. Das erste Bild erscheint erst dann wieder, wenn das letzte Bild aus der Box verschwunden ist. Das erste Bild soll jedoch direkt wieder am letzten Bild anschließen.

Habt Ihr eine Idee, wie ich das Problem lösen kann? Hier der Code

<div class="marquee" style="width:500px; border: 1px solid #000000; overflow:hidden; white-space: nowrap;">
   <div class="marquee-content" >
       <span style="position:relative;"><span style="position:absolute; color:ff0000;">Das ist ein Test</span><img src="bild1.png" style="height:200px; width:auto;"></span><span style="padding-right:100px;"></span>
        <img src="bild2.png" style="height:200px; width:auto;"><span style="padding-right:100px;"></span>
        <img src="bild3.png" style="height:200px; width:auto;"><span style="padding-right:100px;"></span>
        <img src="bild4.png" style="height:200px; width:auto;"><span style="padding-right:100px;"></span>
   </div>
</div>

<style>
.marquee {
   display: flex;
   flex-flow: row nowrap;
   justify-content: end;
}
.marquee-content {
   animation: marquee 20s 0s linear normal infinite;
   position: relative;
   display: inline-block;
}

@keyframes marquee {
   0% {
      right: -1rem;
      transform: translate(100%, 0%);
   }
   100% {
      right: calc(100% + 1rem);
      transform: translate(0%, 0%);
   }
}
</style>​

Vielen Dank im voraus für Eure Hilfe :-)

[Kristy]

<div class="marquee">
  <div class="marquee-track">
    
    <div class="content">
        <span class="text-item">This is a test</span>
        <img src="bild1.png">
        <img src="bild2.png">
        <img src="bild3.png">
        <img src="bild4.png">
    </div>

    <div class="content">
        <span class="text-item">This is a test</span>
        <img src="bild1.png">
        <img src="bild2.png">
        <img src="bild3.png">
        <img src="bild4.png">
    </div>

  </div>
</div>

<style>
.marquee {
  width: 500px;
  border: 1px solid #000000;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: flex;
  /* Ensure the width fits both sets of content */
  width: max-content;
  animation: scroll 20s linear infinite;
}

.content {
  display: flex;
  align-items: center;
  /* Use gap for spacing instead of empty spans */
  gap: 100px;
  /* Add gap after the last item so it doesn't touch the next set */
  padding-right: 100px;
}

img {
  height: 200px;
  width: auto;
}

.text-item {
  color: #ff0000;
  margin-right: 100px; /* spacing for the text specific item */
}

@keyframes scroll {
  0% {
    transform: translateX(0); /* Starts visible inside the box */
  }
  100% {
    transform: translateX(-50%); /* Moves exactly half the width (one full set) */
  }
}
</style>​

Give that a try. It should start visible and loop without any awkward empty space.