Das Marquee Text-Widget fügt deiner auf dem Astroid-Framework bestehenden Joomla-Webseite eine schlanke, horizontale Laufschrift hinzu. Die Inhalte gibst du frei als Text (mehrere Einträge), die automatisch nacheinander angezeigt und mit einem wählbaren Trenner (z. B. •) getrennt werden. Ideal für kurze Hinweise, News-Teaser, Angebote oder Statusmeldungen.
Highlights
- Freitext-Eingabe: Beliebig viele Einträge, jeweils eine Zeile / ein Item.
- Endlosschleife (optional): Nahtloses, ruckelfreies Looping mit korrekt gesetztem Trenner – auch vom letzten zum ersten Eintrag.
- Richtung & Geschwindigkeit: Links/rechts und Dauer (z. B. „20s“) frei wählbar.
- Pause bei Hover (optional): Stoppt die Animation beim Überfahren mit der Maus.
- Trenner frei definierbar: Text oder HTML (z. B. • oder |).
- Stil anpassbar: Textfarbe, Hintergrund, Schriftgröße, Zeilenhöhe, Innenabstand (Padding) und zusätzliche CSS-Klassen.
- 0ptional verlinkbar: Einträge können als Links formatiert werden (z. B. zu Detailseiten).
Wichtigste Einstellungen
- Einträge (Freitext): Liste der Texte; jeder Eintrag in einer neuen Zeile.
- Trenner: Zeichen oder HTML zwischen den Einträgen (Standard: • ).
- Endlosschleife: Ja/Nein.
- Richtung: Nach links oder nach rechts.
- Geschwindigkeit (Dauer): CSS-Zeitwert, z. B. 12s, 20s, 35s.
- Abstand (Gap): Abstand zwischen Items/Trennern, z. B. 2rem oder 24px.
- Pause bei Hover: Ja/Nein.
- Darstellung: Textfarbe, Hintergrundfarbe, Schriftgröße, Zeilenhöhe (optional), Padding, Custom-Class.
Demo: Marquee Text (Astroid Widget)
Einsatzszenarien
Das Widget eignet sich hervorragend für kurze Breaking News oder Service-Hinweise auf der Startseite. Es kann als Promo-Ticker genutzt werden, um Aktionen, Öffnungszeiten oder Lieferzeiten prägnant zu kommunizieren. Ebenso funktioniert es als Status- oder Event-Ticker, etwa mit Hinweisen wie „Heute geschlossen“ oder „Webinar live“.
Barrierefreiheit & UX
Das Widget respektiert die Systemeinstellung „Bewegung reduzieren“ (prefers-reduced-motion), sofern sie aktiviert ist. Für eine gute Lesbarkeit empfehle ich klare Kontraste und eine ausreichend große Schriftgröße.
Leistungsaspekte
Die Animation läuft rein über CSS und benötigt keine externen Bibliotheken. Dank einer minimalen DOM-Struktur bleibt das Widget auch bei längeren Texten performant.
Kompatibilität
- Entwickelt für das Astroid Framework (Joomla), funktioniert mit aktuellen Joomla-Versionen (5/6) und den gängigen Astroid-Templates.
Installation
Entpacke das ZIP und kopiere den kompletten Inhalt nach: /media/templates/site/dein_template/astroid/elements/