• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Lauftext ist unterschiedlich schnell

@Alphavirus

Neues Mitglied
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>
 
Zuletzt bearbeitet:
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:
Ü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;
        }
 
Zuletzt bearbeitet:
Tatsächlich, das funktioniert! Auch wenn ich das mit der Berechnung nicht verstehe. Ich war halt nie besonders gut in Mathe.
Vielen Dank
 
Zurück
Oben