Lauftext mit bestimmten Eigenschaften

    Guten Tag,


    Ich lerne seit guten 2-3 Tagen nun Html / Jscript / Css durch learning by doing, ich hab schon Erfahrung mit anderen Programmier/Script sprachen, aber das spielt erst mal keine Rolle.
    Um Html und den ganzen Kram zu lernen hab ich mir auch ein für mich sinnvolles Projekt ausgedacht, ich möchte für einen Kollegen ein Twitch-Overlay getalten.
    Soweit bin ich nun:
    https://www.youtube.com/watch?v=Sbt6uhBfQcY
    Wenn jemand auf Twitch auf die "Folgen" Schaltfleche drückt, wird die im Video gezeigte Animation ausgefüht.
    Das bewerkstelle ich indem ich via der Twitch API und JSON mir alle benötigten Informationen zukommen lasse.


    Das "Problem":
    Ich würde gerne den Text wo der Benutzer steht in Lauftext (animiert) angezeigt haben, aber nur wenn der Name eine bestimmte pixel Länge überschreitet.
    Dazu muss der Text hinter ein "unsichtbares Objekt" verschwinden, also ab einer bestimmten Stelle wird der Text abgeschnitten und kommt von der anderen Seite wieder rein.


    Beispiel:
    _____|est DasIstEinT|____ Anstatt: ___DasIstEinTest____
    (von Links nach Rechts animiert)

    Gibt es dafür schon ein Script oder ein Lösungsansatz?


    Bis jetzt bin ich alleine bis auf Google zurecht gekommen, ich hab schon hiernach gesucht, aber eventuell habe ich nach den falschen Begriffen gesucht,
    und das was ich gefunden hatte, entsprach nicht dem was ich mir wünsche.
    Dehalb hab ich mich hier angemeldet, eventuell kann ich wenn ich mich weiter mit Html usw beschäftige auch anderen Helfen, aber dieses mal würde ich mich
    sehr über Hilfe freuen.

    Hey!


    Was du suchst war vor langer, langer Zeit mal Bestandteil von HTML und nannte sich marquee.


    Zitat von w3c

    No, really. don't use it.


    Heute benutzt man für so etwas natürlich Javascript. Was blieb ist jedoch der Name, es gibt also ein jQuery Plugin namens marquee: https://github.com/aamirafridi/jQuery.Marquee


    Also schnell einlesen wie das Ganze verwendet wird, jQuery und das Plugin in die Seite laden und fertig. Fast.


    Wenn du jetzt noch darauf Rücksicht nehmen willst, ob der Text breiter ist als das Element in dem es sich befindet, brauchst du ein kleines Workaround:


    HTML
    <div id="marquee">
    <span>Hier der Text</span>
</div>


    Die Breite des div-Elements nimmt (im Normalfall) 100% des verfügbaren Platzes oder die ihm zugewiesene Breite an. Das span-Element hingegen ist nur so breit wie sein Inhalt. Das muss man nur noch mittels Javascript herausfinden:


    JavaScript
    // Da du jQuery sowieso laden musst am Besten so:
if($("#marquee span").width() > $("#marquee").width())
    $('#marquee').marquee();




// Pures Javascript wäre:
if(document.getElementById("marquee").offsetWidth > document.getElementById("marquee").getElementsByTagName("span")[0].offsetWidth)
    $('#marquee').marquee();


    Ansonsten kannst du natürlich auch deine eigene Funktion schreiben wenn du Lust hast.


    Hier noch in Aktion bei codepen: codepen.io/VabNOa


    Wenn die ganze Kiste bei dir dank Twitch nun völlig anders funktioniert, müsstest du noch mal detailliert erklären wie (Code).

    Vielen Dank, sowas habe ich gesucht, und weiß auch warum ich es nicht gefunden habe.
    Ich habe das ältere ohne Js "marquee" gefunden, und da wie du auch schon beschrieben hast, man es nicht nutzen sollte, habe ich Suchtreffer mit diesem Wort ignoriert :D


    Nunja Funktioniert auch soweit, hab nurnoch ein kleines Problem, dass die Animation stoppt wenn man den Text in der Laufzeit ändert, aber da werd ich mich die Tage mal ransetzen.
    Falls du/jemand weiß, woran es liegt, würd ich mich über eine weitere Antwort sehr freuen, ansonsten werde ich mich mal ransetzen , googlen und rumprobieren. ;)


    Ps. Danke für dein sehr ausführlichen Beitrag :)

    Vielen Dank nochmal!


    Ich habe es grade auch hinbekommen, aber deine Lösung ist deutlich eleganter, ich habe noch viel zu lernen :D
    (Das ist auch der Grund weshalb ich mein Code nicht gezeigt habe :whistling: )
    Aber es macht spaß damit zu arbeiten, da sieht man seine Änderungen direkt, im gegensatz zu C++ / C# usw

    Elegant ist gut :)


    Du brauchst dich mit deinem Code nicht verstecken. Wir haben alle mal klein angefangen und mehr als verbessern kann man dich nicht, da hätten doch alle etwas von. Zeig doch einfach mal wie du es gelöst hast? Sicher interessant auch in Kombination mit der Twitch API.


    Klar sieht man seine Änderungen direkt. Bei Programmierung mit Compiler weiß man dafür vorher, was in etwa passiert. Das ist bei HTML und Konsorten nicht immer der Fall :D

    Zitat von Basi

    Klar sieht man seine Änderungen direkt. Bei Programmierung mit Compiler weiß man dafür vorher, was in etwa passiert. Das ist bei HTML und Konsorten nicht immer der Fall :D


    Außer man hat ne nice IDE welche alles schon ausprobiert, ist aber nur für groß-Projiekte verhältnissmäßig was Aufwand/Nutzen angeht. :P
    Überraschungen sind aber auch was tolles xD


    Zeig dein Code her, nur durch verbessert werden und Erfahrung sammeln kann man selber besser werden :)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden