Ablösung <marquee>

  • Hallo zusammen,

    ich wende mich heute an euch, weil ich vor einem Problem stehe, das ich so nicht gelöst bekomme - habe es mit mehreren Anläufen versucht, aber scheitere immer kläglich daran.

    Es sei dazu gesagt, dass das echt zum "heulen" ist, weil es so was einfaches ist und ich schon sehr viel schwerere Dinge gelöst habe - und daran scheitere..


    Ich habe ein Wordpress-Plugin geschrieben, das mir einen marquee setzt per Shortcode. Den Text dazu definiere ich übers Backend, genau so wie den delay und den amount. Das alles klappt auch wunderbar. Es wird toll angezeigt, es läuft toll durch, etc.

    Leider gibt es aber ein Problem. <marquee> ist halt einfach veraltet und wird in vielen Browsern nicht mehr richtig unterstützt - gerade in Safari / auf dem Handy wäre es aber wichtig. Aus diesem Grund musste ich mir eine Lösung einfallen lassen. Heutzutage geht ja alles schon per Transform (css) oder eben per JS.

    Also habe ich ChatGPT gefragt, wie das ganze zu lösen wäre. Ich habe sehr viele Vorschläge ausprobiert und rumprobiert, aber ich scheitere immer an folgenden Dingen:

    Die Geschwindigkeit richtet sich nach dem Text (was bei marquee so nicht ist - und auch nicht sein soll) - Denn hat man nun einen kleinen Informationstext, läuft er in Zeitlupe. Hat man einen größeren, dann ist es Formel 1.

    Er startet nicht wie gewöhnlich von rechts nach links sondern irgendwo von der Mitte. Ändert man dann den Transform ab, geht es - aber man wartet dann sehr lange darauf, dass der Text irgendwann kommt- auf dem Handy noch sehr viel länger.

    Hat jemand eine Idee, wie man eine möglichst gleiche Lösung wie <marquee> schaffen kann?

    Vielen Dank im Voraus!

    Liebe Grüße

  • Hallo domeetr , willkommen zurück!

    Hier hilft eine Erinnerung an die Schulzeit: v=s/t Die Geschwindigkeit v soll konstant sein, der Weg s ist die Breite des Elementes, das bewegt wird. Und die Zeit t ist zu ermitteln. Umgestellt t=s/v d. h. Du dividierst die Breite des Elementes, diese kannst Du durch getBoundingClientRect() ermitteln, durch eine Konstante. Auf die Weise erhältst Du die Zeit bzw. die Dauer der Animation.

  • Leider gibt es aber ein Problem. <marquee> ist halt einfach veraltet und wird in vielen Browsern nicht mehr richtig unterstützt

    Caniuse sieht das aber anders, aber veraltet ist es natürlich trotzdem - aber weniger das Element sondern die Laufschrift. Wenn ein Text wichtig ist, möchte der Benutzer ihn direkt lesen können ohne darauf warten zu müssen dass er endlich durchgelaufen ist - und wenn der Text unwichtig ist, kannst du ihn auch einfach ganz weglassen. Lass das mit der Laufschrift also einfach ganz sein und schreib den Text einfach so hin.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!