Das Joomla-Modul GSAP Elements bietet eine leistungsstarke Sammlung animationsbasierter Stile und Effekte, die die visuelle Attraktivität und Interaktivität von Joomla-Websites steigern. Dank der robusten GreenSock Animation Platform (GSAP) ermöglicht dieses Modul Entwicklern und Designern die Erstellung ansprechender Preloader, Showcases, Parallax-Effekte, Prozessabläufe, Galerien, Zähler und einer Vielzahl weiterer animierter Elemente, die Nutzer begeistern.
Die besondere Vielseitigkeit dieses Moduls liegt in seiner Fähigkeit, Inhalte nahtlos aus Joomla-Artikeln oder direkt in seinen Parametern definierten benutzerdefinierten Elementen anzuzeigen. Diese Flexibilität erlaubt es Website-Erstellern, dynamische Animationen zu integrieren, ohne auf den Komfort der Inhaltsverwaltung verzichten zu müssen. Neben grundlegenden Animationen bietet GSAP Elements optionale Cursor-Effekte und ausgefeilte Bildgel-Effekte, die die Nutzerinteraktionen bereichern und ein haptisches Feedback erzeugen. Die Unterstützung von Google Fonts und anpassbare Layout-Einstellungen gewährleisten zudem eine stilvolle und konsistente visuelle Darstellung auf verschiedenen Geräten und Bildschirmgrößen.
Durch die Kombination der leistungsstarken GSAP-Funktionen mit der Inhaltsflexibilität von Joomla verwandelt es statische Websites in lebendige digitale Erlebnisse, die zum Entdecken einladen und Besucher begeistern.
Online-Moduleinstellungen prüfen – Bearbeiten und Vorschau anzeigen
Allgemeine Einstellungen
- Stil – Visuellen Stil auswählen (Beispiele: `preloader`, `show`, `show1` ... `show13`, `parallax1`, `process`, `process_glitch`, `process2`, `project`, `carousel`, `skew`, `gallery`, `animate`, `counters`, `imggel`).
- Unterformulare zum Hinzufügen benutzerdefinierter Elemente (verwendet, wenn `Stil` auf `animate` oder `counters` gesetzt ist oder wenn `Quelle` = Benutzerdefinierte Elemente ist).
- Datenquelle – Artikel / Benutzerdefinierte Elemente / Ordner.
- Spaltenbreite – Spaltenlayout für Zähler (2 bis 6 und Varianten).
- Volle Breite – Modul in voller Breite anzeigen (ein-/ausschalten).
- Haupttext – Haupttitel, der in den entsprechenden Stilen angezeigt wird.
- Zähler anzeigen – Zählen für bestimmte Stile ein-/ausschalten.
- Oberer Bereich, Hintergrundbild und Informationstext für bestimmte Stile.
- (z. B. `process2`).
- Option zum Vergrößern des letzten Bildes für den Stil `show9`.
- Verschiedene Bild-/Hintergrundeffekte und Effektauswahl.
- Geschwindigkeit – Parallax-Geschwindigkeit (für `parallax1`).
- Hintergrundfarbe (RGBA) für einige Stile.
- jQuery laden – jQuery optional aus dem Modul laden (nur bei Bedarf aktivieren).
- Benutzerdefinierten Cursor aktivieren.
- Bild des Elements als Cursor verwenden – Ja/Nein.
- Überblendungsmodus (normal oder `difference`).
- Google Font aktivieren.
- Schriftart-URL, Familienname und Schriftschnitt, wenn `Google Font` aktiviert ist.
Datenquelle:
Artikel
- Kategorie auswählen
- Artikel in Unterkategorien
- Kategorietiefe
- Schlagwortfilter
- Empfohlene Artikel
- Artikelfeld zum Sortieren
- Sortierrichtung
- Anzahl
- Link öffnen – Neues Fenster / Gleiches Fenster / Popup-Fenster
- Benutzerdefinierte Artikelfelder – Ja / Nein
- Kategorietitel – Ja / Nein
- Artikeltitel – Ja / Nein
- Maximale Titellänge
- Beschreibung anzeigen – Ja / Nein
- Maximale Beschreibungslänge
- Datum anzeigen – Ja / Nein
- Datumsformat – Ja / Nein
- Weiterlesen anzeigen – Ja / Nein
- Bildeinstellungen
- Einleitung aus dem Bild – Ja / Nein Nein
- Vollständiger Text aus dem Bild – Ja/Nein
- Einleitender Text im Text – Ja/Nein
- Vollständiger Text im Text – Ja/Nein
- Reihenfolge
- Größenänderungsmodus
- Bildbreite
- Bildhöhe
Sonderanfertigungen
- Bild auswählen
- Titel
- Info
- Haupttext
- Link „Weiterlesen“
Ordner als Quelle
Wählen Sie in den Moduleinstellungen unter „Quelle“ die Option „Ordner“ aus.
Der ausgewählte Ordner und seine Unterordner werden rekursiv durchsucht. Unterstützte Dateiendungen sind jpg, jpeg, png, gif, webp und bmp.
Dateinamenformat für Ordner
Verwenden Sie den Dateinamen (ohne Endung), um Titel, Info und Beschreibung festzulegen:
01 - Titel | Info || Haupttext.jpg
Verwenden Sie dieses empfohlene Schema:
REIHENFOLGE - TITEL | INFO || BESCHREIBUNG.ext
Formen und Bildeffekt
Bildform
Die Option Bildform ist unabhängig vom Bildeffekt „Zeichnung“ verfügbar. Sie beschneidet oder maskiert die Originalbilder, ohne diese in Zeichnungen umzuwandeln. Zur Auswahl stehen: Rechteck, Kreis, Ellipse, Raute, Sechseck, Spritzer, Form 1 bis Form 6 sowie Zufall (Formen 1–6). Bei „Zufall“ werden den Bildern nach dem Zufallsprinzip Maskenformen zugewiesen.
Bildkonturen animieren
Zeichnen Sie die Bildkonturen mit animierten SVG-Linien, deren Farben aus dem Foto übernommen wurden, und blenden Sie anschließend das Foto ein. Demo
Bildeffekt
Für den Bildeffekt stehen drei Optionen zur Verfügung: Original (Standard), Zeichnung, Aquarell und Ölmalerei. Der Effekt ist unabhängig von der Bildform; beide Einstellungen können also einzeln verwendet oder miteinander kombiniert werden.
- Effektstärke: Sanft, Leicht, Normal, Stark oder Sehr stark. Hiermit wird die Stärke der Bleistiftlinien (bei „Zeichnung“) bzw. die Pigmentintensität, Farbansammlung und Papierstruktur (bei „Aquarell“) angepasst.
- Verhalten bei Mauszeiger-Kontakt: „Original“ (Standard) zeigt beim Überfahren des Team-Elements vorübergehend das Quellbild an; bei „Zeichnung“ bleibt der gewählte bearbeitete Effekt sichtbar.
Showcase Stil
Showcase1 Stil
Showcase2 Stil
Showcase3 Stil
Showcase4 Stil
Showcase5 Stil
Showcase6 Stil
Showcase7 Stil
Showcase8 Stil
Showcase9 Stil
Showcase10 Stil
Showcase11 Stil
Showcase12 Stil
Showcase13 Stil
Parallax Stil
Process Stil
Process2 Stil
Skew Stil
Project Stil
Gallery Stil
Counters Stil
Images Gel Effect Stil
Page Preloader Stil
Carousel Stil
Slider reveal
