NumScroller ist ein jQuery-Plugin, das eine Animation der fortlaufenden Zahlenerhöhung ausführt, sobald diese beim Scrollen sichtbar wird.

Grundeinstellungen

Veröffentlichungseinstellungen

Setzen Sie das Anfangs- und Enddatum der Veröffentlichung. Dadurch wird die ui/Theme-Builder-Komponente nur für den angegebenen Zeitraum veröffentlicht. Wenn Sie sowohl das Startdatum als auch das Enddatum der Veröffentlichung festlegen, wird die ui/Theme-Builder-Komponente nur zwischen dem Anfangs- und dem Enddatum angezeigt.

Veröffentlichung starten

Wenn Sie nur das Startdatum der Veröffentlichung festlegen und nicht das Enddatum, beginnt Joomla! die ui/Theme-Builder-Komponente am angegebenen Anfangsdatum der Veröffentlichung anzuzeigen, und sie wird nie aufhören, die Komponente anzuzeigen.

Veröffentlichung beenden

Wenn Sie nur das Enddatum der Veröffentlichung festlegen und nicht das Startdatum, zeigt Joomla! die ui/Theme-Builder-Komponente an, sobald Sie sie aktiviert haben, und stoppt die Anzeige der Komponente, sobald das Enddatum erreicht ist.

Label

Definieren Sie einen Namen, um dieses Element im Theme-Builder leicht zu identifizieren.

Position

Positionieren Sie die Komponente im normalen Inhaltsfluss, jedoch mit einem relativen Versatz.

Links

Wenn position: relative; - definiert die Eigenschaft „left“ den linken Rand eines Elements in einer Einheit links/rechts von seiner normalen Position.
Wenn position: absolute; - definiert die Eigenschaft „left“ den linken Rand eines Elements in einer Einheit links vom linken Rand seines nächstgelegenen positionierten Vorfahren. (z.B. 20% oder 50px ...)

Rechts

Wenn position: relative; - definiert die Eigenschaft „right“ den rechten Rand eines Elements in einer Einheit links/rechts von seiner normalen Position.
Wenn position: absolute; - definiert die Eigenschaft „right“ den rechten Rand eines Elements in einer Einheit rechts vom rechten Rand seines nächstgelegenen positionierten Vorfahren. (z.B. -20% oder 50px ...)

Oben

Wenn position: relative; - bewegt die Eigenschaft „top“ den oberen Rand eines Elements über/unter seine normale Position.
Wenn position: absolute; - setzt die Eigenschaft „top“ den oberen Rand eines Elements in eine Einheit über/unter dem oberen Rand seines nächstgelegenen positionierten Vorfahren. (z.B. -20% oder 50px ...)

Unten

Wenn position: relative; - bewegt die Eigenschaft „bottom“ den unteren Rand eines Elements über/unter seine normale Position.
Wenn position: absolute; - setzt die Eigenschaft „bottom“ den unteren Rand eines Elements in eine Einheit über/unter dem unteren Rand seines nächstgelegenen positionierten Vorfahren. (z.B. 10% oder 50px ...)

z-index

Die Z-Index-Eigenschaft gibt die Stapelreihenfolge eines Elements an. Z-Index funktioniert nur bei positionierten Elementen (position: absolute, position: relative).

Anzeigen

Wählen Sie eine der folgenden Optionen, um das Element für Bildschirme größer als die angegebene Breite anzuzeigen.

Versteckt

Wählen Sie eine der folgenden Optionen, um das Element für Bildschirme größer als eine angegebene Breite auszublenden.

Startnummer

Legen Sie die Startnummer für das inkrementelle Rollieren fest.

Endnummer

Legen Sie die Endnummer für das inkrementelle Rollieren fest.

Inkrementwert

Legen Sie den Inkrementwert für jedes Rollieren fest.

Animationsverzögerung

Gesamtzeit in Sekunden, um die Anzahl der Inkrementierungen abzuschließen.

Klasse

Definieren Sie einen oder mehrere Klassennamen für das Element. Trennen Sie mehrere Klassen durch Leerzeichen.

ID

ID-Selektor für das Element.

Titeleinstellungen

Titel anzeigen

Wenn auf „Ja“ gesetzt, wird diese Option den Komponententitel im Frontend aktivieren.

Titel

Geben Sie Text ein, der als Komponententitel verwendet wird.

HTML-Tag für Titel

Wählen Sie ein HTML-Tag für den Titel aus.

Schriftgröße

Setzen Sie die Schriftgröße des Titels für diesen Selektor.

Schriftgewicht

Setzen Sie das Schriftgewicht des Titels für diesen Selektor.

Titelstil

Wählen Sie einen Stilmodifikator für den Titel aus.

Titelfarbe

Wählen Sie eine Titelfarbe.

Hintergrundeinstellungen

Eigenes Hintergrundbild

Wenn auf „Ja“ gesetzt, können Sie verschiedene Hintergrundoptionen einstellen. (Hintergrundbilder, verschiedene Mischmodi, benutzerdefinierte Farben)
Wenn auf „SVG“ gesetzt, können Sie Ihre eigenen SVG-Hintergründe verwenden. (Mehr erfahren)

Modul-Hintergrund

Wählen Sie eine Standard-Hintergrundfarbe.

Inverse Farbe

Wählen Sie die Klasse „light“, um die Sichtbarkeit von Objekten auf dunklen Hintergründen im hellen Stil zu verbessern. Wenn Sie einen dunklen Stil verwenden, fügen Sie die Klasse „dark“ zu Elementen auf einem hellen Hintergrund hinzu.
Die Optionen „Primary“ und „Secondary“ (Hintergrundeinstellungen) erweitern automatisch den inversen Stil von der Inverskomponente. Wenn Sie dieses Verhalten verhindern möchten, zum Beispiel weil Sie Karten in diesen Abschnitten verwenden, fügen Sie diese Option „Farbe beibehalten“ hinzu.

Stileinstellungen

Addon Abstand

Wählen Sie ein Außenabstand für die Komponente.

Inhalt

Geben Sie Text ein, der als Komponenteninhalte verwendet wird. (HTML ist erlaubt)

Ausrichtung

Wählen Sie eine Ausrichtung für den Inhalt.

Position-Komponente verwenden?

Ja oder Nein.

Bild einfügen

Wählen Sie ein Bild aus, um den Inhalt darüber zu platzieren.

'alt'-Attribut für Bild festlegen

Das erforderliche „alt“-Attribut gibt einen alternativen Text für ein Bild an, falls das Bild nicht angezeigt werden kann.

Box-Position

Positioniert das Box-Element.

Positionsmodifikator

Wählen Sie eine der folgenden Optionen, um positionierten Elementen einen Rand zuzuweisen.

Box-Polsterung

Wählen Sie eine Polsterung für die positionierte Box.

Box-Hintergrund

Wählen Sie eine Standard-Hintergrundfarbe für die positionierte Box.

Tablet-Box-Breiteneinstellungen

Wählen Sie eine Breite für die Box auf Tablets.

Desktop-Box-Breiteneinstellungen

Wählen Sie eine Breite für die Box auf Desktops.

TV-Box-Breiteneinstellungen

Wählen Sie eine Breite für die Box auf TV-Geräten.

Animationseinstellungen

Scrollspy-Animation

Die Scrollspy-Einstellungen überwachen das Scrollen der Seite und löst Ereignisse basierend auf der Scrollposition aus. Wenn Sie beispielsweise eine Seite nach unten scrollen und ein Element zum ersten Mal im Ansichtsfenster erscheint, können Sie eine sanfte Animation auslösen, um das Element einzublenden.

Responsive

Fügen Sie eine Zahl in Pixeln ein, z.B. 640, oder einen Breakpoint, z.B. @s, @m, @l oder @xl. Das Parallax wird für die angegebene Ansichtsfensterbreite und größer angezeigt.

Ansichtsfensterposition

Mit der Option „Viewport“ können Sie die Animationsdauer anpassen. Der Wert definiert, wie weit das Ziel-Element im Ansichtsfenster gescrollt wird, bis die Animation abgeschlossen ist. Mit dem Wert 1 dauert die Animation so lange, wie sich das Element im Ansichtsfenster befindet (Standardverhalten). Wenn Sie es auf 0,5 setzen, animiert es die Eigenschaft, bis die Scrollposition die Mitte des Ziel-Elements erreicht.

Box-Parallax-Animation verwenden?

Ja oder Nein. (Mehr erfahren)

Hintergrundbild-Parallax?

Ja oder Nein.