Animierter Newsticker in VueJS

Für die Arbeit musste ich die Tage einen animierten Newsticker erstellen – quasi ein Laufband. Der Text sollte nach links einlaufen und sich unendlich wiederholen. In den frühen Tagen des Internets hat man das auf vielen Webseiten gesehen. Ich dachte also „Kein Problem!“. Little did I know… Da die Vue Plugins aus dem Netz entweder hakten oder nicht zu stoppen waren (das ist wichtig für die Barrierearmut), habe ich prompt selber eine Komponente gebaut und möchte den Code mit dir teilen.

Ich gehe für diesen Artikel davon aus, dass du dich mit der allgemeinen Dateistruktur von VueJS Projekten, und dem Framework selbst, auskennst. Den vollständigen Code findest du auf GitHub.

Einbindung der Komponente

Den Newsticker in einer Komponente oder Seite einzubinden ist simpel. Wir müssen ihr lediglich den zu animierenden Text übergeben.

Schauen wir uns nun die Newsticker Komponente an. Ich habe sie als normale Vue Komponente inkl. Template erstellt. Da sie aber viel Javascript Logik enthält, könnte man auch eine reine Javascript Komponente bauen.

Ich werde die Abschnitte einzeln durchgehen. Den vollständigen Code (ohne ausführliche Kommentare) findest du auf GitHub.

Template

Der Template Part ist relativ unspektakulär. Wir haben ein Wrapper-Element und das Element, was den zu animierenden Text enthält. Mit Klick auf den Wrapper können wir die Animation starten oder stoppen. Das macht die Komponente zumindest barriereärmer. Das kann man später noch zu einem Start/Stop Button erweitern.

Die vergebenen CSS Klassen werden im nächsten Abschnitt wichtig.

Styles (CSS/SCSS)

Für die Animation und den Skript Part benötigen wir die Gesamtbreite des Texts. Damit das funktioniert, muss das Text-Element absolut positioniert sein. Damit der Text nicht umbricht, setzen wir white-space: nowrap;. Damit steht der Text in einer langen Zeile.

Um den Text vertikal im Wrapper-Element zu zentrieren, werden top und transform genutzt.

Der Wrapper muss relativ positioniert werden, damit das Text-Element nicht ausbricht. Außerdem bekommt er ein overflow: hidden; damit der Text über die Ränder des Wrappers hinaus laufen kann, aber nicht dargestellt wird.

Skript

Damit sind wir auch schon beim längsten und komplexesten Part angekommen: Dem Javascript Code. Der Einfachheit halber habe ich die Kommentare direkt in den gist Code geschrieben.

Fertig ist der Newsticker! Um die Animationsgeschwindigkeit zu verändern, kannst du den Wert timeout anpassen. Dann fehlt nur noch ein bisschen Styling.

Hat dir der Artikel geholfen? Lass es mich gerne in einem Kommentare wissen.