Oryginalny slider dla Joomla z GSAP i 16 trybami działania

Jeśli prowadzisz stronę portfolio, landing page agencji, landing kampanii albo homepage marki, pierwszy ekran musi zatrzymać uwagę w ułamku sekundy. Klasyczny „fade + autoplay” już nie robi wrażenia — użytkownicy widzieli go tysiące razy.

Design Cart GSAP Slider to moduł Joomla 6, który wstawia pełnoekranowy (lub ograniczony wysokością) slider obrazów z szesnastoma wyrafinowanymi przejściami animowanymi przez GSAP. Został zaprojektowany tak, żeby w panelu administracyjnym dodać slajdy, wybrać tryb animacji i dopracować wygląd bez ruszania kodu — a jednocześnie zachować jakość ruchu

 

Technologia i skąd wzięła się animacja

Rdzeniem frontendu jest GSAP (GreenSock Animation Platform) — biblioteka JavaScript od lat używana przy złożonych, płynnych animacjach UI. W module towarzyszy jej wtyczka GSAP Observer, dzięki której da się zmieniać slajdy gestem: kółkiem myszy, przeciąganiem oraz touch. Doładowanie tła obrazów (bo slajdy używają background-image, nie klasycznego <img>) obsługuje imagesLoaded. Dopiero po załadowaniu grafik znika loader i użytkownik widzi gotowy slider.

Animacje nie powstały „z powietrza”. Moduł opiera się na publicznej kolekcji pomysłów na fullscreenowe przejścia slajdów, którą opublikowała Manoela Ilic na Codrops (artykuł i demo: Some Ideas for Fullscreen Image Slideshow Animations). Kod źródłowy dem jest udostępniony na licencji MIT. My wzięliśmy te szesnaście wariantów timeline’ów GSAP, owinęliśmy je w strukturę modułu Joomla 6, dodaliśmy panel administracyjny, warstwę treści na slajdach (nagłówek, opis, CTA), tryby wysokości Desktop / Tablet / Mobile, autoplay, kolory paneli w trybach z „żaluzjami” oraz styl nawigacji. Innymi słowy: jakość ruchu Codrops + wygodna konfiguracja Design Cart w Joomla.

Po stronie serwera to klasyczny site module: plik wejściowy PHP normalizuje parametry (w tym subform ze slajdami), layout generuje markup i rejestruje assety przez WebAssetManager Joomli. Tryb animacji wybiera odpowiedni plik ES module (mode1.js … mode16.js). Dzięki temu nie ładujesz wszystkich timeline’ów naraz w jednym gigantycznym skrypcie — bierzesz tylko wybrany wariant. CSS jest scoped pod klasą kontenera, więc slider nie „psuje” globalnych stylów szablonu. Wysokość i kolory idą przez zmienne CSS, więc zmiana w panelu nie wymaga przebudowy plików.

Ważna rzecz praktyczna: oryginalne demo Codrops było pełnoekranowym playgroundem z własną ramką nawigacji między wariantami. W module zostawiliśmy to, co ma sens na produkcji: kontener o konfigurowalnej wysokości, slajdy z treścią, przyciski prev/next, Observer tylko w obszarze modułu (nie na całej stronie) oraz przełącznik autoplay. To różnica między „ładnym demem” a „modułem, który da się wdrożyć u klienta bez walki ze scrollem strony”.

 

Do czego się przyda i jak działa

Najnaturalniejsze zastosowania to hero homepage, landing kampanii, portfolio / case study intro, strona agencji kreatywnej, hotel lub po prostu strona internetowa firmowa. Gdziekolwiek pierwszy ekran ma opowiadać historię obrazami i potrzebuje przejść mocniejszych niż zwykły fade. Możesz ustawić pełną wysokość viewportu (100vh / 100dvh) albo — gdy pod sliderem ma być od razu treść — własną wysokość osobno dla desktopu, tabletu i mobile.

Jak to działa z perspektywy użytkownika? Widzi pierwszy slajd (obraz + opcjonalnie nagłówek, opis i przycisk). Może przejść dalej: przyciskami nawigacji, gestem scroll/drag (jeśli włączone), albo poczekać na autoplay. Każda zmiana odpala timeline GSAP przypisany do wybranego trybu: raz jest to pionowy paralaks, raz spin, raz żaluzje kolorowych paneli. Dopóki animacja trwa, kolejne gesty są blokowane (flaga „isAnimating”), żeby nie nakładać timeline’ów na siebie.

Z perspektywy redaktora w Joomli: dodajesz wiersze w subformie „Slajdy”, wybierasz tryb w zakładce „Animacja”, dopracowujesz kolory i wysokość w „Wygląd”. Nie musisz edytować JS. Jeśli wybierzesz tryb 11, 12, 15 lub 16, pojawią się dodatkowe pickery kolorów paneli dekoracyjnych — to właśnie te kolorowe „zasłony” / „żaluzje” między slajdami.

Kilka wskazówek wdrożeniowych z życia: zdjęcia trzymaj lekkie (WebP / dobrze skompresowany JPG), bo to hero. Na mobile często lepiej dać własną wysokość (np. 420–520 px) zamiast pełnego ekranu, żeby użytkownik od razu widział, że poniżej jest treść. Jeśli wysokość jest ograniczona i Observer koliduje ze scrollem strony — wyłącz nawigację kółkiem w ustawieniach. Autoplay pauzuje przy najechaniu myszką / fokusie, więc nie walczy z czytaniem CTA.

 

Przykłady działania (wideo)

Poniżej możesz zobaczyć wideo z wszystkimi trybami działania modułu.

 

Instalacja w Joomla 6

Moduł jest przygotowany pod Joomla 6 (PHP minimum 8.3). Paczkę możesz pobrać z naszej strony Design Cart oraz z repozytorium GitHub:

Pobranie ze strony Design Cart:

4

Kod / release na GitHub:

 

1. Zaloguj się do panelu administracyjnego Joomli.
2. Przejdź do System → Install → Extensions (lub odpowiednik w Twojej lokalizacji językowej).
3. Wgraj plik ZIP modułu i potwierdź instalację.
4. Wejdź w Moduły (site), kliknij Nowy i wybierz Design Cart GSAP Slider.
5. Nadaj tytuł (możesz ukryć wyświetlanie tytułu w pozycji), wybierz pozycję w szablonie (np. hero / top) oraz na jakich stronach ma się pokazywać.
6. W zakładkach parametrów dodaj slajdy, wybierz tryb animacji i wygląd — szczegóły poniżej.
7. Zapisz i sprawdź frontend. Przy pierwszej wizycie po instalacji warto twarde odświeżenie cache przeglądarki / cache Joomli, jeśli masz agresywne cache’owanie assetów.

Aktualizacje możesz dystrybuować przez update server (plik update_mod_gsap_slider.xml na serwerze Design Cart). Po podniesieniu numeru wersji w manifeście i w XML aktualizacji Joomla wskaże dostępny upgrade w panelu.

Jeśli masz problemy z wdrożeniem zawsze możesz skontaktować się z nami na: tworzenie stron Joomla!

 

Dokumentacja ustawień w panelu Joomla

Po otwarciu modułu w administracji poza standardowymi polami Joomli (tytuł, pozycja, przypisanie do menu itd.) masz własne zakładki parametrów. Poniżej opis każdego pola w tabelach: switche, selecty, inputy, color pickery i notatki informacyjne.

 

Zakładka „Slajdy”

Tu budujesz treść karuzeli. Pole jest typu subform (tabela powtarzalna): dodajesz i usuwasz wiersze przyciskami Add / Remove.

Pole	Typ	Opis	Domyślnie
Slajdy	subform (wielokrotny)	Kontener wszystkich slajdów. Kolejność wierszy = kolejność na froncie. Pusty zestaw = moduł nic nie wyrenderuje.	—
Nagłówek	text	Tytuł na slajdzie. Może być pusty — wtedy nie pojawi się w HTML. Tag HTML nagłówka (h1 / h2 / h3 / p) ustawiasz w zakładce Wygląd.	pusty
Opis	textarea (safe HTML)	Krótki tekst pod nagłówkiem. Dopuszcza bezpieczny HTML (np. akapity, linki — zależnie od filtrów Joomli). Może być pusty.	pusty
Treść buttona	text	Etykieta CTA, np. „Zobacz ofertę”. Przycisk pojawi się tylko gdy jednocześnie wypełnisz link.	pusty
Link buttona	url	Adres docelowy CTA. Wymagany razem z treścią buttona. Walidowany jako URL.	pusty
Zdjęcie	media	Obraz slajdu z Media Managera Joomli. Renderowany jako tło CSS (background-image, cover, wycentrowane). To najważniejsze pole wizualne — bez sensownego zdjęcia efekt animacji nie ma na czym „zagrać”.	pusty

 

Zakładka „Animacja”

Tu wybierasz charakter ruchu i zachowanie nawigacji. Część pól kolorów paneli pojawia się dopiero przy konkretnych trybach (showon).

Pole	Typ	Opis	Domyślnie
Tryb animacji	select (1–16)	Główny przełącznik stylu przejścia GSAP. Ładuje plik modeN.js. Tryby 11, 12, 15 i 16 dokładają kolorowe panele dekoracyjne. 01 — Pionowy paralaks 02 — Pionowy skew / rozciągnięcie 03 — Zoom i pionowe odsłonięcie 04 — Miękkie fade pionowe 05 — Obracane karty 06 — Poziome rozciągnięcie 07 — Flash i skalowanie 08 — Wyskok z boku + kolor 09 — Spin zoom 10 — Przesunięcie ukośne 11 — Pionowa zasłona koloru 12 — Pozioma kaskada kolorów 13 — Przewracanie 3D 14 — Drzwi ScaleX 15 — Podwójne żaluzje pionowe 16 — Wielokrotne żaluzje poziome	1
Kolory żaluzji / zasłon	note	Informacja widoczna przy trybach 11, 12, 15, 16. Pickery poniżej dotyczą tylko paneli przejściowych, nie tła całego slajdu.	—
Kolor panelu wipe	color	Tryb 11. Kolor pojedynczej pionowej zasłony między slajdami.	#8c718e
Kaskada — kolor 1	color	Tryb 12. Pierwszy panel w poziomej kaskadzie.	#d4503e
Kaskada — kolor 2	color	Tryb 12. Drugi panel w poziomej kaskadzie.	#1c1a1a
Kaskada — kolor 3	color	Tryb 12. Trzeci panel w poziomej kaskadzie.	#4e4141
Kolor żaluzji	color	Tryb 15. Jeden kolor dla obu pionowych żaluzji schodzących się na środku.	#000000
Żaluzja — kolor A (para 1)	color	Tryb 16. Pierwsza para paneli „multi shutter”.	#060b17
Żaluzja — kolor B (para 2)	color	Tryb 16. Druga para paneli.	#34365c
Żaluzja — kolor C (para 3)	color	Tryb 16. Trzecia para paneli.	#9f6794
Pokaż przyciski nawigacji	switcher	Włącza / wyłącza strzałki prev / next w rogu slidera.	Tak
Pokaż podpowiedź przy nawigacji	switcher	Widoczne gdy nawigacja włączona. Etykieta typu „scroll / drag” obok przycisków (na mobile bywa ukryta w CSS).	Tak
Pulsujące przyciski nawigacji	switcher	Widoczne gdy nawigacja włączona. Półprzezroczysty, pulsujący cień (glow) w kolorze tła przycisków. Przy prefers-reduced-motion animacja jest ograniczona.	Tak
Nawigacja kółkiem / przeciąganiem	switcher	GSAP Observer w obszarze modułu (wheel, touch, pointer). Przy ograniczonej wysokości może kolidować ze scrollem strony — wtedy ustaw Nie.	Tak
Autoodtwarzanie	switcher	Automatyczne przejście do następnego slajdu. Pauzuje przy hover / focus.	Nie
Opóźnienie autoplay (ms)	number	Widoczne gdy autoplay włączony. Czas między slajdami. Zakres: 2000–30000, krok 500. Minimum 2 s, żeby animacja zdążyła się domknąć.	5000

 

Zakładka „Wygląd”

Tu ustawiasz geometrię kontenera, typografię treści, nakładkę czytelności, kolory CTA oraz kolory nawigacji.

Pole	Typ	Opis	Domyślnie
Wysokość slidera (responsive)	note	Informacja: wysokość konfigurujesz osobno dla Desktop / Tablet / Mobile; animacje działają zarówno w fullscreen, jak i przy własnej wysokości.	—
Desktop — tryb wysokości	select	Fullscreen = 100vh z fallbackiem 100dvh. Własna wysokość = wartość z pola poniżej.	Fullscreen
Desktop — wysokość	text	Tylko przy trybie „Własna”. Przykłady: 700 (= px), 700px, 70vh, 80dvh.	700
Tablet — tryb wysokości	select	Jak Desktop, ale dla zakresu tabletu.	Fullscreen
Tablet — wysokość	text	Tylko przy własnej wysokości tabletu. Sama liczba = piksele.	560
Mobile — tryb wysokości	select	Domyślnie własna wysokość — żeby hero nie zabierał całego ekranu telefonu bez kontekstu treści poniżej.	Własna wysokość
Mobile — wysokość	text	Tylko przy własnej wysokości mobile.	420
Breakpoint tablet (px)	number	Poniżej tej szerokości viewportu obowiązują ustawienia tabletu. Zakres: 480–1400.	992
Breakpoint mobile (px)	number	Przy tej szerokości i poniżej obowiązują ustawienia mobile. Musi być niższy niż breakpoint tabletu (jeśli nie — moduł sam to skoryguje). Zakres: 320–1200.	768
Rodzaj nagłówka	select	Tag HTML dla pola „Nagłówek” slajdu: H1, H2, H3 albo akapit (P). Wybór SEO / hierarchii — nie zmienia samego tekstu.	H1
Wielkość czcionki nagłówka	number	Rozmiar w px (12–120). Na wąskich ekranach CSS dokłada clamp.	48
Kolor czcionki nagłówka	color	Kolor tekstu nagłówka na slajdzie.	#ffffff
Wielkość czcionki opisu	number	Rozmiar opisu w px (12–48).	18
Kolor czcionki opisu	color	Kolor tekstu opisu.	#ffffff
Pozycja bloku (nagłówek, opis, button)	select	Lewa / Środek / Prawa. Steruje flexem treści i kierunkiem gradientu nakładki.	Lewa
Kolor nakładki treści	color	Bazowy kolor gradientu pod tekstem dla czytelności.	#000000
Przezroczystość nakładki (%)	number	0 = brak nakładki, 100 = pełne pokrycie. Razem z kolorem buduje RGBA w CSS. Zakres: 0–100.	35
Kolor tła buttona	color	Tło CTA na slajdzie.	#27C07C
Kolor tła hover buttona	color	Tło CTA po najechaniu.	#22a86a
Kolor czcionki buttona	color	Kolor tekstu CTA.	#ffffff
Kolor czcionki hover buttona	color	Kolor tekstu CTA w stanie hover.	#ffffff
Wielkość czcionki buttona	number	Rozmiar tekstu CTA w px (12–24).	16
Tło przycisków nawigacji	color	Gdy nawigacja włączona. Kolor kółek prev/next i „pill” z hintem. Ten sam kolor zasila pulsujący glow.	#ffffff
Tło przycisków nawigacji (hover)	color	Kolor kółek po najechaniu.	#cccccc
Kolor ikon nawigacji	color	Kolor strzałek i tekstu hintu.	#000000

 

Zakładka „Zaawansowane” (standard Joomla)

To pola frameworkowe, obecne w większości modułów — warto je znać, bo wpływają na cache i integrację z szablonem.

Pole	Typ	Opis	Domyślnie
Alternatywny układ	module layout	Wybór override’u layoutu z szablonu (jeśli istnieje html/mod_gsap_slider/...).	layout z paczki
Przyrostek klasy modułu	textarea	Dodatkowa klasa CSS doklejana do wrappera. Przydatna do lokalnych styli w szablonie. Walidowana jako identyfikator CSS.	pusty
Buforowanie	select	Użyj ustawień globalnych albo wyłącz cache dla tego modułu. Przy częstej zmianie treści slajdów czasem wygodniej wyłączyć cache na czas prac.	Użyj globalnych
Czas buforowania	number	Czas cache w sekundach.	900

 

Podsumowanie

Design Cart GSAP Slider to most między światem kreatywnych dem z Codrops a codzienną pracą w Joomla 6. Pod spodem masz GSAP, Observer i szesnaście timeline’ów inspirowanych pracą Manoeli Ilic na tympanus.net. Na wierzchu — panel, w którym redaktor dodaje zdjęcia, teksty i CTA, wybiera tryb animacji, ustawia wysokość pod Desktop / Tablet / Mobile, kolory paneli w trybach „żaluzjowych”, autoplay z konkretnym czasem oraz nawigację z opcjonalnym pulsem.

Jeśli potrzebujesz hero, które nie wygląda jak kolejny gotowiec z szablonu, a jednocześnie nie chcesz utrzymywać ręcznie wklejonego playgroundu z GitHuba Codrops — ten moduł jest właśnie po to. Pobierz paczkę ze strony Design Cart lub z GitHuba, zainstaluj w Joomli 6, wrzuć kilka mocnych kadrów i wybierz tryb, który pasuje do marki. Reszta to dopieszczenie kolorów i wysokości pod device’y.