CSS Profis hier? Alert in und aus Screen fliegen lassen

  • Hi allerseits! Hoffe, dass ich hier ins richtige Forum schreibe.

    Ich versuche seit Tagen ein Problem zu lösen - bisher leider ohne Erfolg.


    Ich habe einen Raid-Alert erstellt, bei dem am unteren Bildschirmrand verschiedene Charaktere von rechts ins Bild reinlaufen und links wieder raus. Einer der Charaktere hält eine Fahne, auf der ich dann den Namen des "Raiders" anzeigen lassen will. Das Problem hierbei: durch die Animation der Charaktere/der Fahne, muss der Alert natürlich auch animiert werden und wie ein Slider von rechts außerhalb des Bilds bis nach links außerhalb des Bilds einfliegen. Aber ich krieg es nicht hin!

    Ich habe CSS Befehle gefunden, die etwas einfliegen lassen, das dann in der Mitte des Bildschirms verweilt. Was ich aber genau erreichen möchte, ist eine lineare Bewegung (gleiche Geschwindigkeit), bei der innerhalb von 5 Sekunden ein Text von rechts nach links durchfließt. Ebenfalls darf der Text auch erst nach etwa 3 Sekunden nach Alert-Beginn rechts im Bild erscheinen, da die Charaktere nicht von Anfang an rechts ins Bild laufen.


    Gibt es hier jemanden, der weiß, wie ich sowas in CSS anstellen kann?

  • Hey,

    ich habe dir mal was kleines gebastelt:

    https://codepen.io/Paragrimm/pen/zYpeRGa


    Die genauen Timings musst du ggf. selbst anpassen, sowie die Schriftart. Ich habe die relevanten Stellen kommentiert.


    Der kritischste Teil wird vermutlich die -10% sein in Zeile 7, da musst du etwas rumspielen, bis es halbwegs passt. Etwas komplett dynamisches ist mir auf Anhieb leider nicht eingefallen. Könnte mir aber vorstellen, dass es da auch ein paar Tricks gibt.


    Hilft dir das erstmal? Ich könnte die Tage vielleicht nochmal schauen, ob man das komplett dynamisch hinkriegt.


    Mit "dynamisch" meine ich in dem Fall: "Unabhängig von der Länge des Raider-Namens".


    MfG,

    Paragrimm

Jetzt mitmachen!

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