css: Dreieck hüpft im Rechteck

[Rolf B]

Hallo Jörg,

Und wie bekommen ich das mit dem Laufband hin?

Das ist etwas tricky. Du möchtest ja - mutmaßlich -, dass der Lauftext in dem Moment, wo er links verschwindet, rechts wieder erscheint. So, wie das marquee-Element das tut. Wenn man das nur verwenden könnte...

Um das sauber zu lösen, musst Du die Breite des Lauftextes wissen. Oder Du musst jemanden kennen, der es weiß.

Und du musst den Videotitel teilen: In Container und Marquee selbst, damit der Hintergrund nicht mit herein scrollt.

<div class="video-title">
   <div>Rick Astley, Rickrolling for Fun</div>
</div>

Den Container platzierst Du wie gehabt:

.video-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    padding: 5px;
}

und das Marquee lässt Du wandern:

.video-title div {
    position: relative;
    display: inline-block;
    white-space: pre;
    color: white;
    font-size: 16px;
}

@media (prefers-reduced-motion: no-preference) {
   .video-title div {
      animation: marquee 6s linear infinite;
   }
}

display-block, damit es so breit ist wie der Inhalt. white-space:pre, damit es nicht umbricht. position:relative, nicht absolute, damit das Eltern-Div die Höhe mitbekommt.

GANZ WICHTIG: Die Animation nur einschalten, wenn sich der Anwender das nicht verbittet (Windows-Einstellungen: Animation anzeigen - unter Mac+Linux gibt's sicher ähnliches).

Die Animation ist tricky. Die Endpositionen des Texts sind left:100% (bevor er reinmarschiert) und right:100% (wenn er rausmarschiert ist). Aber diesen Übergang kann man nicht animieren. Man kann aber den von left:100% nach left:0% marschieren lassen und ihn GLEICHZEITIG mit translate von 0% nach -100% verschieben. Der Clou ist, dass die Prozente bei left sich auf den Container beziehen, die Prozente bei translate aber auf das Text-Div.

@keyframes marquee {
     0% { left: 100%; transform: translate(0%, 0); }
   100% { left:   0%; transform: translate(-100%, 0); }
}

Und das geht super, selbst dann, wenn der Text länger ist als das Video breit ist.

Die Frage, warum Du ein Marquee machen willst, kann natürlich mit heißen Flames diskutiert werden. Weshalb missbilligt man <marquee>, wenn es dann mit einer Hölle an Markup und CSS nachgebaut wird?! Okay - ein Argument gibt's: Wenn die Media-Query da ist, können sensible Anwender sich davor schützen.

Rolf