Lauftext ist unterschiedlich schnell

@Alphavirus · 8 Oktober 2024

Moin

Ich hab hier einen einfachen Link, der sich von links nach rechts bewegt.
Mein Problem:
Wenn man die Weite des Fensters verändert, verändert sich auch die Geschwindigkeit des Links.
Kann man das irgendwie verändern? Die Geschwindigkeit soll immer gleich bleiben.
Achso, wenn es geht in CSS. Javascript kann ich noch nicht.
Danke
Hier die Adresse und der Code:
Testseite

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lauftext</title>
<style>

#link {
    text-align: center;
    position: absolute;
    animation: linkMovement 7s infinite;
    animation-timing-function: linear;
}

@keyframes linkMovement {
    0% {
        left: -100px;
    }

    100% {
        left: 100vw;
    }
}

</style>
</head>
<body>
    <a href="#" id="link">Lauftext</a>
</body>
</html>

Sempervivum · 9 Oktober 2024

Dazu fällt mir aus der Schulzeit die Formel v=s/t ein. Umgestellt um aus dem Weg die Zeit zu ermitteln: t=s/v. Man kann daran denken, das mit calc zu implementieren, aber ein einfacher Ansatz funktioniert nicht, weil die Einheiten nicht passen:

Code:

animation: linkMovement calc(100vw * 0.05s) infinite;

Auf Stackoverflow findet man jedoch eine Lösung, wie man aus einer Viewport-Unit einen skalaren Wert machen kann:

CSS use Calc to get seconds based on viewport width

I am trying to find a way if possible to calculate the duration of a CSS Keyframe animation based on viewport. Tried to do something like this: calc((100vw / 75) * 1s); but I think I won't be able...

stackoverflow.com

Übertragen auf diesen Fall:

Code:

animation: linkMovement calc(tan(atan2(100vw, 1px)) * 0.05s) infinite;

Funktioniert in Chrome, Opera und Edge aber nicht in Firefox. Dieser mag es offenbar nicht wenn man bei den Parametern vw und px vermengt. Außerdem zu sehr Trickprogrammierung, auch von daher ist eine Anwendung nicht zu empfehlen.
Besser mit Javascript berechnen.

Edit: Was das Problem mit Firefox betrifft, hätte ich gleich das Beispiel von Stackoverflow vollständig übernehmen sollen. So funktioniert es auch mit diesem Browser:

Code:

        @property --w {
            syntax: "<length>";
            initial-value: 0px;
            inherits: true;
        }

        #link {
            text-align: center;
            position: absolute;
            /* animation: linkMovement calc(tan(atan2(100vw, 1px)) * 0.05s) infinite; */
            animation-name: linkMovement;
            animation-iteration-count: infinite;
            --w: 100vw;
            animation-duration: calc(tan(atan2(var(--w), 1px)) * 0.01s);
            animation-timing-function: linear;
        }

@Alphavirus · 14 Oktober 2024

Tatsächlich, das funktioniert! Auch wenn ich das mit der Berechnung nicht verstehe. Ich war halt nie besonders gut in Mathe.
Vielen Dank

Lauftext ist unterschiedlich schnell

@Alphavirus

Mitglied

Sempervivum

Senior HTML'ler

CSS use Calc to get seconds based on viewport width

@Alphavirus

Mitglied

Neueste Beiträge