Laufschrift erstellen

  • Hallo,


    bin neu hier. Bin mir leider nicht sicher wohin mein Betrag genau gehört. Eher CSS, JavaSript oder html. Trifft irgendwie alles zu.


    Ich habe eine Seite erstellt, die Laufschriften enthält.

    Vom Prinzip bin ich damit recht zufrieden, aber ich vermute es geht etwas besser.

    Meine Laufschriften habe ich nämlich 3 mal.

    1. die sichtbare Laufschrift.

    2. die Lautschrift, aber im Grunde nur um eine Hintergrundfarbe durchgängig zu bekommen (Also auch vor und nach dem Text. Nach dem Text hätte ich auch durch ändern von width ohne diesen Text hinbekommen, aber leider habe ich es davor nicht geschafft.)

    3. die Laufschrift, aber nur damit genügend Platz ist um nicht zu weit hoch und runter zu scrollen und der ganze Text sichtbar ist.


    Ich vermute, dass ich auf 2. und 3. verzichten kann, wenn ich die Rahmen selbst richtig anlege. Leider kenne ich die Größe nicht genau vorher, da der html Quelltext von meinem Programm erstellt wird und ich nicht weiß, wie ich es selbst errechnen kann. Bein Versuche sind bisher leider gescheitert mit margin, padding und border sind leider gescheitert.


    Kann mir jemand einen genaueren Tipp geben, wie ich auf 2. und 3. verzichten kann. Ich vermute irgendwie mit CSS oder JavaScript. Bei JavaScript sollte die Lösung aber so aussehen, dass es nur einmal "berechnet" wird und nicht ständig.


    Ich freue mich über konkrete Vorschläge.


    Danke

  • Als Erstes bitte keine ZIP Dateien hochladen .

    Es gibt nicht viele User die solche Dateien herunterladen und öffnen.

    Deswegen bekommst du dann auch weniger Hilfe.


    Ich habe das aber gemacht und mal bei Codepen reinkopiert , dann können es sich alle anschauen.

    * Link entfernt, weil existiert nicht mehr *


    Habe da jetzt nur die CSS und Js Dateien in den entsprechenden Feldern reinkopiert.


    Ich würde es versuchen, ohne Javascript zu erstellen und alles mit CSS zu machen.

    Auch dein Inline-style solltest du mit in den <style> packen , bzw. in einer Extradatei auslagern.

    Gleiche CSS Typen zusammen packen und nicht 2 x body{} , 2 x table{} nutzen usw.

  • Nur mit CSS habe ich es mit Animationen ausprobiert.

    EINE Beispieldatei habe ich damit auch hinbekommen.

    Problematisch wurde es einfach, da die Ticker-Texte unterschiedlich lang sind und sich auch mit der Zeit ändern.

    Meine statische css Seite, die ganz toll aussah, hatte dann zwei Probleme:

    a) da mit CSS die Animationen in Sekunden angegeben wird hatte zur Folge, dass bei kurzen Texten die Animation viel zu langsam war und bei langen Texten viel zu schnell.

    b) die "Berechnung" der Breite war mir nicht möglich. Daher wurde der Text dann entweder nicht ganz raus oder rein gescrollt


    Daher war ich auf JavaScript ausgewichen.


    Zu "inline": Ja, ist mir klar. Aber es ist erstmal eine Testversion, die von einem c++ Programm erstellt wird. Ich schreibe das nicht immer per Hand. Dort ist "inline" sehr einfach. Alles andere macht es dort komplizierter. Werde ich also erst dann ändern, wenn ich mit der Version zufrieden bin.


    Zu "gleiche Css Typen zusammen": Stimmt. Sourcecleanup muss ich noch machen. Einrücken könnte ich auch besser. Hilft aber nicht bei meiner Ausgangsfrage. Sourcecleanup wollte ich machen, sobald ich mit dem grundsätzlichen Vorgehen zufrieden bin.


    Frage: Kann ich in css den die beiden oben beschriebenen Probleme vermeiden?

  • Kleine Korrektur: Im JavaScript-Teil muss es zwei mal "bottomScroller" statt "bottomScrollerInvisible" lauten. (Sonst fängt die untere Laufschrift nicht wieder neu an)

  • tk1234: Danke. Hilft aber nicht der Ausgangfrage. Die Option es statisch zu machen habe ich schon seit über 7 Jahren. (z.B. wenn ich es drucke)

    Ganz ohne "Dynamik" geht es hier aber nicht. Am Bildschirm muss es aber irgendwie automatisch gescrollt (oder umgeblättert) werden, weil da keiner ist, der den Text mit einer Maus oder ähnlichem hoch und runter bewegen kann. Das ist eine Anzeigetafel. Dort gibt es kein manuelles "scrollen" von einem Benutzer.

  • Zitat

    a) da mit CSS die Animationen in Sekunden angegeben wird hatte zur Folge, dass bei kurzen Texten die Animation viel zu langsam war und bei langen Texten viel zu schnell.

    b) die "Berechnung" der Breite war mir nicht möglich. Daher wurde der Text dann entweder nicht ganz raus oder rein gescrollt


    Daher war ich auf JavaScript ausgewichen.

    Da bin ich voll bei dir. Reine CSS-Lösungen sind gut und schön, aber wenn es um Erweiterungen und Änderungen geht, ist es eine Qual, sie anzupassen.

    Es gibt jedoch die Webanimation-API:

    https://wiki.selfhtml.org/wiki/JavaScript/Animation

    Da kann man problemlos mit JS die Parameter der Animation berechnen und einstellen, z. B. die Dauer abhängig von der Länge des Textes.

  • Ok.

    Wenn alle Texte gleich bleiben , oder nicht größer als 100vw werden dann geht es

    https://basti1012.bplaced.net/…rdner=html-seminar&id=443

    Wenn deine Texte unterschiedlich lang sind und sich ändern und länger als 100vw werden brauch man sowieso Javascript um die Containerlänge zu erfahren.

    Dann kann man auch gleich bei Javascript bleiben .

    Da muss ich euch recht geben

  • Das ist eine Anzeigetafel. Dort gibt es kein manuelles "scrollen" von einem Benutzer.

    Solch spezielle Rahmenbedingungen solltest du unbedingt in der Frage erwähnen - da ist es auch überhaupt kein Problem Javascript einzusetzen da du auf die Umgebung, in der die Seite eingesetzt wird, Einfluss hast.

  • Ich habe mal eine Demo, die ich früher mit Webanimation gemacht hatte, heraus gesucht und auf deine Gegebenheiten angepasst. Den Text habe ich durch das Script verdoppelt. Dadurch läuft er ohne Lücke endlos durch.

    Einschränkungen:

    • Der Text muss die Fensterbreite mindestens ausfüllen, andernfalls müsste man ihn mehr als ein Mal vervielfachen.
    • Ist verbesserungsfähig in Bezug darauf, dass man die wesentlichen Parameter als Parameter übergeben könnte, wahrscheinlich auch die Richtung.
    • Die Demo von früher enthielt ein Polyfill, ich habe nicht untersucht, ob man das heute noch braucht.
  • Kurzer Text auf breitem Fenster:

  • Selektor und Geschwindigkeit als Parameter, damit man mehrere Laufschriften verwenden kann:

  • Danke! Das sieht sehr interessant aus. Muss ich noch einmal in Ruhe lesen, weil ich jede Zeile komplett verstehen möchte. Was mich im Moment etwas stört ist, dass dort so ein langes Skript nachgeladen wird. Ich werde mal ausprobieren dein Beispiel zu kürzen.

  • Ja, funktioniert auch ohne das Skript (zumindest unter Linux mit Firefox 81 und Chrome 85).

    Das ist schonmal sehr gut.

    Ich werde es aber auf einem recht alten Windowsrechner (der Anzeigetafel) noch testen müssen.


    Was mir bisher auffällt: Die Laufschrift flackert bei hohen Geschwindigkeiten (etwas stärker als bei meiner Version).

    Kann man das noch irgendwie verhindern? Kann evtl. irgendwie einen "ScreenBuffer" einschalten um das Flackern zu verhindern?

    Mag auch an meiner Grafikkarte liegen (ist eine uralte onboard-Karte (AMD HD 4250)), andererseits sind mir solche Rucker auf anderen Webseiten bisher noch nie aufgefallen)

  • Das Flackern muss wohl an meinem Grafikkartentreiber liegen. Habe es mittlerweile mit einem neueren (aber auch schon 7 Jahr alten) Laptop unter Windows ausprobiert. Da flackert es nicht.


    Das externe Skript wird min. für den alten Internetexplorer benötigt. (Und der ist leider noch auf dem Anzeigegerät drauf).


    Deine Variante gefällt mir insofern sehr gut, da der Text ununterbrochen dargestellt wird und es elegant geschrieben ist.


    Leider sind dort zwei kleine Probleme, sodass ich wohl erstmal bei meiner Lösung bleiben werde:

    a) Die Laufschriften sind nicht fixiert. Bei meiner Variante habe ich ja noch einen dritten Scroller mit dem Text im Hintergrund und die Laufschriften dürfen davon nicht weggescrollt werden und es darf auch kein Bereich verdeckt bleiben (siehe mein erstes Post mit dem Ausgangsproblem 2. und 3. . Leider weiß ich immer noch nicht wie man das eleganter lösen kann und würde es mit deiner Laufschrift genau so umständlich lösen wie bei meiner Variante.

    b) Die Variante ist leider noch "zu modern"; Ich muss im Moment noch ältere Versionen sinnvoll unterstützen. Ich gucke mir jetzt mal dieses nachgeladene Skript an. Evtl. kann ich das sinnvoll kürzen.

    Ich habe mir deine Variante für später in meinen TODO Ordner gepackt, da ich sie vom Prinzip schöner finde.


    Bleiben noch meine Ausgangsfrage für beide Varianten bestehen: Wie kann ich das so fixieren, dass der andere Text beim hoch und runterscrollen nicht verdeckt wird (so wie bei meiner Variante, aber ohne den Text 3 mal schreiben zu müssen; ok. es geht auch nur mit den 2 zusätzlichen div-Elementen (ohne Text), aber nur, wenn der Text nur einzeilig ist. Bei meiner Variante kann ich es dadurch auch mit mehreren Zeilen machen.).

  • a) ist eine Aufgabe, die sehr häufig auftritt. Die althergebrachte Methode besteht darin, die Elemente oben und unten zu fixieren. Dann hat man das Problem, dass die Haupt-Inhalte zunächst verdeckt werden und man muss dies z. B. mit Margins lösen. Eine moderne Variante besteht darin, den Haupt-Container mit Flexlayout so einzurichten, dass er genau den freien Raum ausfüllt.

    Für die gescrollte Tabelle gibt es dann auch zwei Möglichkeiten: Wenn Du möchtest, dass die Scrollbar sichtbar ist und die Position anzeigt, kannst Du bei dem Verfahren bleiben, die Scrollposition zu animieren. Wenn Du auf die Scrollbar verzichten kannst, kannst Du die Tabelle ebenfalls mit der Webanimation-API scrollen.


  • Danke! Probiere ich aus.


    Ich denke die Scollerbar am rechten Rand ist durchaus sinnvoll. So kann man bei längeren Tabellen schnell erkennen, ob man (wahrscheinlich) gerade beim "heute" oder "morgen" ist (Die meisten lassen 2 Tabellen mit "Heute" und "Morgen" (vertikal) darstellen). Außerdem kann ich so das Neuladen der Seite immer genau dann anstoßen, wenn man ganz oben (oder ganz unten) angekommen ist. (Aber evtl. kann man das bei der Animation auch abfragen. Ich versuche mich mal dort weiter einzuarbeiten.)


    Vielen Danke erstmal soweit. Habe hier sehr gute Tipps bekommen :)

Jetzt mitmachen!

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