Tickermeldungen in Laufband-Darstellung

[Schnippel]

Hi Leute,

ich suche eine Lösung, mit der sich Tickermeldungen per Laufband anzeigen lassen, also die Meldungen von rechts nach links laufen, so
wie hier im Beispiel zu sehen unter "Latest News":

https://www.bloomberg.com/europe

Wie lässt sich sowas in Contao realisieren?

[stefan-at-work]

https://contao.org/de/erweiterungsli...020009.de.html
Läuft jedoch nicht in der Endlosschleife. Müsste man ggf. anpassen...

[Schnippel]

Die Tickermeldungen laufen bei mir mit dieser Erweiterung von links > nach rechts ein und dann wieder aus, bevor die nächste Tickermeldung kommt.

Wie bekommt man die Tickermeldungen von rechts > nach links im "Laufband" angezeigt?
Ich finde da keine Einstellmöglichkeiten :-(

[BugBuster]

Mit mootools habe ich sowas mal gebaut, von hier die Lib:
http://developer.ps/moo/mooquee/

[Exzentrik]

Ich hatte mal eine Seite, bei der die Calender-Events des aktuellen Tages in so einem Bauchband durchlaufen sollten.
Ich habe dafür einfach ein neues Frontend Modul erstellt (Eventliste - Täglich), das im Seitenlayout als Schmale Leiste eingebunden.

Die Laufbewegung habe ich damals über das jQuery-Plugin SmoothDivScroll gemacht: http://www.smoothdivscroll.com/

JS im Seitenlayout eingebunden, den Container vom Modul für das Laufband definiert, und dann nurnoch ein wenig gestyled.

[Schnippel]

Mit mootools habe ich sowas mal gebaut, von hier die Lib:
http://developer.ps/moo/mooquee/

Dazu hätte ich noch ein paar Fragen:

Wie muß man das Ganz in Contao einbinden?
Wie legt man die einzelnen Meldungen an, die dann über den Ticker laufen?
Wo lässt sich die Geschwindigkeit regeln?

[BugBuster]

Das einbinden kommt drauf an wie komfortabel du das haben willst.
Ich hatte das außerhalb von Contao im Einsatz. Für Contao könnte man natürlich eine Erweiterung (Content Element) draus machen oder einfach in einer Templatedatei das anlegen und das dann über "file::.." Insert Tag einbinden.

Richtung, Geschwindigkeit usw. kann man als Parameter übergeben beim Aufruf der JS Klasse als zweiten Parameter.
Per Default ist eingestellt:

var mooquee = new Class({
    initialize: function(element, options) {
		this.setOptions({
			marHeight: 40,
			marWidth: 550,
			steps: 1,
			speed: 40,
			direction: 'bottom',
			pauseOnOver: true,
			pauseOnContainerOver: true
	    }, options);

Ein Beispiel ist ja in der Demo HTML angegeben.

[lucina]

Alternativ: CSS3, transitions, keyframes. Man muss ja nicht immer gleich JavaScript drauf werfen, oder?

Beispiel: https://codepen.io/jamesbarnett/pen/kfmKa

[Schnippel]

Alternativ: CSS3, transitions, keyframes. Man muss ja nicht immer gleich JavaScript drauf werfen, oder?

Beispiel: https://codepen.io/jamesbarnett/pen/kfmKa

Wie lässt sich dies mit mehreren Nachrichten umsetzen?
Ich dachte an

<ul>
<li> News 1</li>
<li> News 2</li>
<li> News 3</li>
</ul>

[lucina]

Ich hab das mal auf Deine ul/li-Struktur angepasst: https://codepen.io/kikmedia/pen/ZKpJdv

[Schnippel]

<ul>
<li> News 1</li>
<li> News 2</li>
<li> News 3</li>
</ul>

Das Problem ist bei mir, daß das erste Listenelement "News 1" immer nur kurz im linken Drittel auftaucht und nicht von rechts einläuft und nach links wandert.
"News 2" läuft gut durch, aber "News 3" läuft nicht bis ganz links durch.

[do_while]

Mache doch ein leeres Element davor und dahinter

[jscholtysik]

Hallo Hagen,

hast Du vor, diese Erweiterung auch für Contao 4.4 fit zu machen?

[do_while]

Ja, habe ich vor. Aber nicht so im ASCII-Modus, sondern schon moderner.
Ich bin im Moment dabei, mich nach interessanten Varianten umzuschauen.
Es soll aber schon ein einfacher Ticker bleiben.

Im Moment gucke ich mir diesen an:
https://www.sjaakpriester.nl/software/telex

Gibt es da Ticker-Empfehlungen aus der Community?

[do_while]

Habe heute den ganzen Tag "getickert".
Die neue Erweiterung contao-ticker für Contao 4.4 ist fertig!

Ihr könnt sie mit dem Contao Manager installieren: do-while/contao-ticker-bundle

Viel Spaß damit!