Marquee
Ein Laufband, das endlos läuft — aus deinen eigenen Elementen, in jede Richtung, mit demselben Tempo auf jeder Bildschirmbreite.
Eine Interaktion läuft über eine feste Dauer. Derselbe Weg ist auf einem 1440er Bildschirm länger als auf einem 390er — oben rast das Band, unten schleicht es. Hier wird die Breite deines Inhalts gemessen und die Dauer daraus berechnet. Das Tempo bleibt das, was du hingeschrieben hast.
- WrapperDer sichtbare Ausschnitt. Was darüber hinausragt, wird verdeckt.
- TrackSeine Kinder bilden eine Wiederholung. Sie werden gruppiert und so oft kopiert, bis der Ausschnitt doppelt gefüllt ist.
- LoopDer Track wandert um genau eine Wiederholung. Am Ende steht die nächste Kopie dort, wo die erste begann — die Naht ist nicht zu sehen.
Dieses <script> in den Custom Code deines Projekts
Einmal pro Projekt genügt, auch wenn du die Lösung auf mehreren Seiten nutzt: Project Settings → Custom Code → Head Code. Das Skript lädt nebenher und hält das Rendern nicht auf; es läuft erst, wenn die Seite steht, und tut nichts, solange kein fpu-Attribut da ist.
<!-- FlowPowerUser · Marquee -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/marquee.js"></script>Ausschnitt und Inhalt markieren
Es braucht zwei Elemente ineinander. Außen der Wrapper — er begrenzt, was man sieht, und bekommt automatisch overflow: hidden. Darin der Track, und in dem liegen deine Elemente nebeneinander; ein Flex-Layout mit Gap ist dafür das Übliche. Alles Weitere entsteht beim Laden: Deine Elemente wandern in eine Gruppe, und die wird kopiert, bis der Ausschnitt gefüllt ist.
Auf den Wrapperder sichtbare Ausschnitt
Auf den Trackim Wrapper
Marquee Wrapper fpu-marquee-element="wrapper"
└─ Marquee Track fpu-marquee-element="track"
├─ Logo 1
├─ Logo 2
├─ Logo 3
└─ Logo 4Veröffentlichen und nachmessen
Seite veröffentlichen und das Browserfenster breiter und schmaler ziehen. Zwei Dinge müssen stimmen: Das Tempo darf sich dabei nicht ändern, und an der Stelle, an der die Wiederholung neu ansetzt, darf nichts springen oder blitzen. Steht das Band still, hat der Track keinen Inhalt oder der Wrapper keine begrenzte Breite — beides schreibt die Konsole hin.
OptionalRichtung, Tempo und Anhalten bei HoverStandard: nach links, 60 px/s
Ohne Angabe läuft das Band nach links mit 60 Pixeln pro Sekunde und hält nicht an. Alle drei Werte gehören auf den Wrapper. Für „up“ und „down“ braucht der Wrapper eine begrenzte Höhe — sonst wächst er mit dem Inhalt mit und es gibt nichts zu verdecken.
Auf den Wrapper
leftIn welche Richtung das Band wandert. Bei „up“ und „down“ wird die Höhe gemessen statt der Breite. Ein unbekannter Wert fällt auf „left“ zurück und schreibt eine Warnung in die Konsole.60Tempo in Pixeln pro Sekunde. Weil die Dauer aus der gemessenen Länge berechnet wird, bleibt dieses Tempo auf jeder Bildschirmbreite dasselbe. Werte ohne Zahl oder kleiner als eins fallen auf 60 zurück.falseHält das Band an, solange die Maus darüber steht oder etwas darin den Tastaturfokus hat. Nur genau „true“ schaltet ein.OptionalEin Knopf zum Anhaltenfür die Barrierefreiheit
Bewegung, die länger als fünf Sekunden läuft und automatisch startet, braucht laut WCAG 2.2.2 eine Möglichkeit, sie anzuhalten. Genau dafür ist dieses Element. Es setzt selbst aria-pressed und schaltet bei jedem Klick um. Wichtig: Der Knopf gehört in den Wrapper oder daneben — niemals in den Track, sonst wird er mitkopiert.
Auf den Knopf
OptionalWeiche Ränder, Abstand und Ziehenalles optional
Diese vier verändern nichts am Grundprinzip, sondern nur, wie sich das Band anfühlt. Alle gehören auf den Wrapper.
Auf den Wrapper
ausBlendet die Ränder weich aus, damit die Elemente nicht hart abgeschnitten wirken. „true“ nimmt 48 Pixel, eine Zahl setzt die Breite selbst.0Zusätzlicher Abstand in Pixeln zwischen zwei Wiederholungen — kommt zu einem Gap, den der Track im Designer schon hat, noch obendrauf.falseMacht das Band mit Maus oder Finger greifbar. Ein Wurf rollt aus und blendet zurück in das eingestellte Tempo. Klicks auf Links darin bleiben Klicks, solange der Finger unter fünf Pixeln bleibt.falseSchreibt beim Start eine Zeile in die Browser-Konsole: gemessene Länge, berechnete Dauer und wie viele Kopien angelegt wurden.Zusätzliche Features
- Wer weniger Bewegung eingestellt hat, bekommt keine
- Steht im Betriebssystem „Bewegung reduzieren“, steht das Band still — rein über CSS, ohne Umweg. Der Inhalt bricht dann normal um und wird nicht abgeschnitten, bleibt also vollständig lesbar.
- Ändert sich die Breite, wird neu gemessen
- Wrapper und Track werden beobachtet. Wird das Fenster gezogen, laden Bilder nach oder ändert ein Breakpoint das Layout, entstehen die nötigen Kopien nach und die Dauer wird neu berechnet.
- Deine Interaktionen bleiben heil
- Die Original-Elemente werden verschoben, nicht geklont — Webflow-Interaktionen daran laufen weiter. Nur die Kopien sind Klone, und die sind für Screenreader ausgeblendet und aus der Tab-Reihenfolge genommen.
- Eigener Code kann andocken
- Über das gemeinsame Dach meldet sich die Lösung an, sobald sie läuft. Anmelden lässt sich auch vorher — der Rückruf kommt trotzdem.