css: Dreieck hüpft im Rechteck

[Jörg]

Hallo,

Ziel war, dass bei mouseover ins Thumbnail das dunkle Rechteck rot wird, was auch funktioniert.

Bei mouseover des Rechtecks soll dr Play-Pfeil 2.5 mal größer werden und bei mouseover des Pfeils selber sich das auch nicht ändern. Stattdessen wird es zwar größer, behält aber seine mittige Position nicht bei.

Zudem wäre es natürlich schön, wenn das laufbad mit der Schrift nicht einfach von rechts nach links fährt und dann neu anfängt, sondern quasi durchgehend läuft, ohne dass der Hintergrund des Laufbandes verschwindet und wieder neu einsetzt.

Was muss ich ändern?

codepen

Gruß, Jörg

[Matthias Scharwies]

Servus!

Hallo,

Nett gerickrollt!

Ziel war, dass bei mouseover ins Thumbnail das dunkle Rechteck rot wird, was auch funktioniert.

Bei mouseover des Rechtecks soll dr Play-Pfeil 2.5 mal größer werden und bei mouseover des Pfeils selber sich das auch nicht ändern. Stattdessen wird es zwar größer, behält aber seine mittige Position nicht bei.

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/transform-origin

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Jörg,

transform-origin geht auch, ist aber umständliches Finetuning.

Besser das Problem gar nicht erst entstehen lassen:

.play-button {
    transition: transform 0.5s; /* Übergangszeit für das Dreieck */
    width: 100%;
    height: 100%;
}

Das ist die Magie von preserveAspectRatio.

Und welcher Depp meinte, deswegen eine Moderationsmeldung machen zu müssen?! Offenbar gibt's hier auch ein fachliches Thema.

Rolf

[Jörg]

Hallo Rolf,

vielen Dank.

.play-button {
    transition: transform 0.5s; /* Übergangszeit für das Dreieck */
    width: 100%;
    height: 100%;
}

Dann muss ich aber den Button auch noch runterscalieren, damit er erstens nicht zu groß ist und zweitens beim hochscalieren innerhalb des FRechtecks bleibt.

codepen

Gefällt mir aber jetzt gut.

Und wie bekommen ich das mit dem Laufband hin?

Zudem wäre es natürlich schön, wenn das laufbad mit der Schrift nicht einfach von rechts nach links fährt und dann neu anfängt, sondern quasi durchgehend läuft, ohne dass der Hintergrund des Laufbandes verschwindet und wieder neu einsetzt.

Gruß, Jörg

[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

[Jörg]

Hallo Rolf,

Danke für Deine Hinweise und Deine Idee.

Den Hintegrund vom Videotitel zu trennen, ist eine sehr gute Idee.
Damit ist schonmal sicher, dass keine "Hintergrundlücke" entsteht.

Leider ist es mir nicht so ganz 100%ig gelungen, mit Deinem Code den Effekt eines 360°-Durchlaufes der Schrift um das Thumb zu erzielen. Irgendwie fing die Schrift immer mittig an.

Aber nach ein bisschen Spielerei mit Deiner Grundidee hab ichs dann doch geschafft und bin sehr zufrieden mit dem Ergebnis.

Danke für Deine Hilfe und schönes WE,

Jörg

[Gunnar Bittersmann]

@@Rolf B

So, wie das marquee-Element das tut. Wenn man das nur verwenden könnte...

Warum sollte man das nicht können? („Valid-HTML“-Bapperl sind überbewertet.)

Wenn schon Lauftext, dann wäre das mein Favorit, anstatt das mit JavaScript nachzubauen.

(Das müsste ich den Machern der CSSBattle auch mal sagen. Bei der Startseite, wo JavaScript-Animationen (zudem noch unsinnige und überflüssige) drauf sind, läuft binnen kurzer Zeit der Lüfter auf Hochtouren.)

Okay - ein Argument gibt's: Wenn die Media-Query da ist, können sensible Anwender sich davor schützen.

Das ist ein gutes Argument. Man kann aber auch

<marquee>Ja wo laufen sie denn?</marquee>
<p>Ja wo laufen sie denn?</p>

im Markup haben und per Media-Query prefers-reduced-motion dafür sorgen, dass nur jeweils eins davon angezeigt wird.

Kwakoni Yiquan