span scroll text

Draku · 12. Mai 2019

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

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

CSS

.textBox {
  height: 30px;
  overflow: hidden;
  line-height: 30px;
  padding: 0px;
  position: relative;
}
.textBox span {
  position: absolute;
  white-space: nowrap;
  transform: translateX(0);
  transition: 1.5s;
}
.textBox:hover span {
  transform: translateX(calc(60% - 100%));
}

Alles anzeigen

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.

Sempervivum · 13. Mai 2019

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:

Code

    <p class="textBox">
        <span id="mySpan">The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog</span>
    </p>
    <style>
        .textBox {
            height: 30px;
            overflow: hidden;
            line-height: 30px;
            padding: 0px;
            display: inline-block;
        }

        .textBox span {
            display: inline-block;
            white-space: nowrap;
            transform: translateX(0);
            transition: 1.5s;
        }

        .textBox:hover span {
            transform: translateX(-100%);
        }
    </style>

Alles anzeigen

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

Draku · 13. Mai 2019

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.

Sempervivum · 13. Mai 2019

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:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test Scrolling Text</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        .textBox {
            height: 30px;
            overflow: hidden;
            line-height: 30px;
            padding: 0px;
            display: inline-block;
            width: 300px;
        }

        .textBox span {
            display: inline-block;
            white-space: nowrap;
            transition: 1.5s linear;
        }
    </style>
</head>

<body>
    <p class="textBox">
        <span id="mySpan">The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog</span>
    </p>
    <script>
function doScroll() {
            var innerEle = document.querySelector(".textBox span");
            var outerEle = document.querySelector(".textBox");
            var innerWidth = innerEle.offsetWidth;
            var outerWidth = outerEle.offsetWidth;
            var diff = outerWidth - innerWidth;
            if (diff < 0) {
                innerEle.addEventListener("mouseover", function () {
                    this.style.transform = 'translate(' + diff + 'px)';
                });
                innerEle.addEventListener("mouseout", function () {
                    this.style.transform = 'translate(0px)';
                });
            }
        }
        doScroll();
    </script>
</body>

</html>

Alles anzeigen

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

djheke · 15. Mai 2019

Bei einer festen Breite sollte es auch so funktionieren.

Code

.textbox:hover span {
transform: translateX(calc(-100% + 300px ));
}

Draku · 15. Mai 2019

Tut mir leid für meine späte Meldung,

dass ist genau das was ich gesucht habe. Die breite wird immer Unterschiedlich sein.

Vielen Dank für die Hilfe.

span scroll text

Jetzt mitmachen!

Teilen

Tags