span scroll text

  • Guten Abend,

    Ich hoffe ihr könnt mir weiter helfen uns war möchte ich einen Text wenn ich drauf gehe scrollt er nach links.

    HTML
    1. <p class="textBox">
    2. <span id="mySpan">The quick brown fox jumps over the lazy dog</span>
    3. </p>

    Der Code funktioniert auch, aber ich möchte das er selbständiger ist.

    Also das ich nicht bei jeder Box die "transform: translateX(calc(60% - 100%));" ändern muss sondern automatisch erkennt wie lang der text ist und dann weiß wie weit er scrollen muss.

    Könnt ihr mir bitte helfen. Danke in voraus.:)

  • Hallo Draku,

    mit Prozentwerten für die Verschiebung bist Du schon auf dem richtigen Weg. Jedoch: Wenn Du transform:translate für die Verschiebung benutzt, brauchst Du gar keine absolute Positionierung. Dieses funktioniert genau so gut:

    Ist das gewollt, dass der Text nur zum Teil nach links gleitet? In meinem Beispiel habe ich -100% verwendet, so dass er ganz verschwindet.

  • Danke für die schnelle Antwort,

    aber leider meine ich das nicht so. Ich möchte halt unter meine Suchleiste Suchbegriffe schreiben, aber leider sind manche texte zu groß. Also wollte ich machen wenn der text zu groß ist halt dieses scrollen passiert wenn man mit der Maus drauf geht.

    Beispiel:

    Die // ist der Anfang das Ende von Element p.


    in der passt der text also sol es so bleiben:

    // Hallo //


    und in den passt der text nicht:

    // Hallo ich b//in Draku


    also möchte ich wenn ich drauf gehe der text bis zum letzten Buchstaben gescrollt wirt also

    Hallo i//ch bin Draku//


    Ich hoffe das man das verstehen kann was ich Erkläre da ich nicht so gut Erklären kann.

  • Ja, jetzt habe ich es verstanden.

    Da fällt mir leider keine Lösung mir reinem CSS ein. Mit Javascript und transition jedoch kein Problem:

    (Begonnen habe ich mit Webanimation, daher die querySelector. Sollte man noch umstellen.)