DC Gradient Slider - najbardziej wyjątkowy slider dla Joomla 5/6

DC Gradient Slider to darmowy moduł dla Joomla 5 i 6, który łączy klasyczne przewijanie slajdów z animowanym gradientem opartym o canvas.

Moduł pozwala tworzyć nowoczesne sekcje hero z efektem płynnych przejść kolorystycznych oraz charakterystycznym łukiem SVG, nadając stronie unikalny, dynamiczny wygląd.

 

1️⃣ Dlaczego powstał ten moduł?

Tworząc kolejne strony internetowe – zarówno dla klientów, jak i do własnych projektów – coraz częściej łapałem się na tym samym problemie 🤔

Internet jest dziś przepełniony masą najróżniejszych sliderów. Są szybkie. Są rozbudowane. Są „uniwersalne”.
Ale prawda jest taka, że większość z nich wygląda… tak samo.

Brakowało mi rozwiązania wyjątkowego ✨
Czegoś, co nie tylko przewija obrazy, ale nadaje im charakter.
Czegoś, co subtelnie i spokojnie przeprowadza użytkownika przez kolejne slajdy, budując klimat, a nie tylko zmieniając grafikę co kilka sekund.

Chciałem efektu, który będzie bardziej doświadczeniem niż animacją 🎨

Tak powstał DC Gradient Slider.

To nie jest zwykły slider. To połączenie klasycznego przewijania slajdów z animowanym gradientem, który delikatnie pracuje w tle 🌊, płynnie przechodząc między zestawami kolorów. Obraz nie znika brutalnie — jest otulony animacją, która nadaje mu głębi i nowoczesnego charakteru.

Dodatkowo całość kończy się łukiem SVG w dolnej części sekcji 🌙
Ten detal zmienia bardzo dużo. Zwykły prostokątny blok zamienia się w element o bardziej organicznym, dynamicznym kształcie. To subtelny akcent, ale właśnie takie detale decydują o tym, czy strona wygląda „jak wszystkie inne”, czy ma swój własny styl.

DC Gradient Slider powstał z potrzeby stworzenia czegoś niepowtarzalnego 💡
Rozwiązania, które sam chciałbym stosować w swoich projektach — i które rzeczywiście stosuję.

Jeśli interesuje Cię profesjonalne tworzenie stron internetowych 🌐, więcej informacji znajdziesz tutaj:
👉 https://www.designcart.pl/tworzenie-stron-www.html

A jeśli szukasz specjalistów od stron opartych o Joomla 🧩, zapraszam tutaj:
👉 https://www.designcart.pl/tworzenie-stron-www-joomla.html

Ten moduł jest efektem realnej pracy przy projektach — nie eksperymentem, nie demo koncepcyjnym, ale rozwiązaniem, które powstało z praktyki i potrzeby jakości 🚀

 

2️⃣ Czym jest DC Gradient Slider?

DC Gradient Slider to darmowy moduł dla Joomla 5 i Joomla 6, który łączy klasyczne przewijanie slajdów z animowanym gradientem opartym o canvas 🎨

Moduł został udostępniony bezpłatnie i opublikowany na GitHub, dzięki czemu każdy może:

• pobrać go bez ograniczeń,

• przejrzeć kod źródłowy,

• modyfikować go pod własne potrzeby,

• a nawet rozwijać projekt dalej.

To rozwiązanie zaprojektowałem tak, aby było maksymalnie proste w użyciu. Użytkownik może w edycji modułu:

• ➕ dodać dowolną liczbę slajdów,

• 🖼 ustawić obraz, nagłówek, opis i link,

• 🎨 skonfigurować kolory animowanego gradientu,

• ⚙️ dopasować wygląd sekcji do własnej identyfikacji wizualnej.

W kilka minut można stworzyć nowoczesną sekcję hero z płynną animacją, subtelnym przejściem kolorów i charakterystycznym łukiem SVG, który nadaje całości unikalny styl ✨

Transparentność projektu – otwarty kod, brak ukrytych mechanizmów i pełna kontrola nad konfiguracją – to dla mnie fundament zaufania. A zaufanie w projektach webowych jest równie ważne jak design.

Poniżej udostępniam wideo - zobacz DC Gradient Slider w akcji 😉:

 

3️⃣ Architektura techniczna 🧠⚙️

Tworząc DC Gradient Slider, zależało mi nie tylko na efekcie wizualnym, ale przede wszystkim na solidnej, przewidywalnej i bezpiecznej architekturze. Poniżej pokazuję, jak moduł działa „od środka” — bez marketingowej mgły ✨

 

🔹 Warstwa frontend 🖥️

🎞 Slick Slider – świadomy wybór

Do obsługi slajdów wykorzystałem Slick Slider. To sprawdzona, lekka i stabilna biblioteka używana od lat w produkcyjnych projektach.

Wybrałem ją, ponieważ:

• jest przewidywalna,

• posiada dobrze udokumentowane eventy,

• pozwala kontrolować moment inicjalizacji,

• nie wymaga ciężkich frameworków.

🌫 Fade zamiast klasycznego slide

Zamiast poziomego przesuwania zastosowałem tryb fade.

Dlaczego?
Bo przy animowanym gradiencie klasyczny slide wygląda zbyt agresywnie. Fade daje spokojne, eleganckie przejście, które buduje wrażenie płynności i premium UX.

🔄 Event init – synchronizacja z Granim

Gradient nie może wystartować zanim Slick zakończy budowę swojej struktury DOM.

Dlatego wykorzystuję event init, który pozwala zsynchronizować start animacji z gotowym sliderem.
To eliminuje problemy z:

• klonowaniem slajdów,

• zmianą struktury DOM,

• błędnymi wymiarami canvas.

🧩 Obsługa wielu instancji

Każda instancja modułu ma unikalny identyfikator i własną konfigurację przekazywaną przez data-attributes.

Dzięki temu można bezpiecznie umieścić kilka sliderów na jednej stronie bez konfliktów i bez nadpisywania konfiguracji.

 

🔹 Gradient 🎨

🧮 Granim.js – dlaczego nie CSS-only?

Animowany gradient można próbować zrobić w CSS. Problem w tym, że CSS:

• nie daje takiej kontroli nad przejściami,

• ma ograniczenia w zakresie płynności,

• nie pozwala na zaawansowane mieszanie obrazu i koloru.

Dlatego użyłem Granim.js, który renderuje gradient w <canvas>.
To daje:

• płynne przejścia,

• pełną kontrolę nad czasem animacji,

• możliwość pracy na wielu zestawach kolorów.

🪟 Canvas jako overlay

Gradient działa jako warstwa canvas nakładana na obraz.

Obraz pozostaje tłem (background-size: cover), a canvas działa jako animowany overlay.
Dzięki temu nie dochodzi do deformacji obrazu, a efekt jest stabilny i przewidywalny.

🧪 mix-blend-mode

Efekt wizualny uzyskiwany jest przy użyciu mix-blend-mode.

Gradient nie przykrywa obrazu, tylko wchodzi z nim w interakcję, tworząc subtelną głębię i nowoczesny efekt.

🌈 Wiele zestawów kolorów

Moduł pozwala zdefiniować wiele par kolorów, które są przekazywane jako struktura JSON do frontendu.

Granim płynnie przechodzi między nimi, tworząc dynamiczne i spokojne animacje.

 

🔹 Bezpieczeństwo 🔐

Bezpieczeństwo danych wejściowych było dla mnie kluczowe.

• Dane z backendu są odpowiednio escapowane w PHP.

• Konfiguracja przekazywana jest przez json_encode.

• Nie używam inline JS z danymi użytkownika.

• Moduł nie zawiera ukrytych mechanizmów ani trackerów.

• Zależności CDN można w razie potrzeby hostować lokalnie.

Transparentność kodu to fundament zaufania 🤝

 

🔹 Wydajność 🚀

Projektując moduł, zależało mi na minimalnym narzucie.

• Minimalny footprint.

• Lazy init po gotowości DOM.

• Brak Vue, React czy innych ciężkich frameworków.

• Opcjonalne wyłączenie jQuery.

DC Gradient Slider to nie tylko efekt wizualny.
To przemyślana architektura łącząca UX 🎯, estetykę 🎨, bezpieczeństwo 🔐 i wydajność 🚀 w jednym spójnym rozwiązaniu.

 

4️⃣ Konfiguracja w panelu Joomla 🧩 (UX + realne użycie)

Jednym z najważniejszych założeń podczas tworzenia DC Gradient Slider było to, aby moduł nie był hardcoded.

Każdy istotny parametr jest sterowalny z poziomu backendu Joomla — bez potrzeby ingerencji w kod 💡

Dzięki temu moduł może być używany zarówno przez developerów, jak i przez osoby techniczne, które po prostu chcą szybko skonfigurować efektowną sekcję hero.

 

🔹 Slajdy 🖼

W zakładce Slajdy użytkownik może:

• ➕ dodać dowolną liczbę slajdów,

• ustawić obraz,

• wprowadzić nagłówek i opis,

• dodać link oraz tekst przycisku,

• kontrolować kolejność wyświetlania.

Każdy slajd działa niezależnie, a konfiguracja przechowywana jest w strukturze JSON przekazywanej bezpiecznie do frontendu.

 

🔹 Gradient 🎨

W zakładce Gradient można:

• włączyć / wyłączyć animację,

• zdefiniować wiele par kolorów,

• kontrolować dynamikę przejścia,

• zdecydować, czy gradient ma współgrać z obrazem.

Gradient oparty jest o Granim.js i renderowany w <canvas> jako overlay.

Konfiguracja obrazu w Granim wygląda następująco:

opts.image = {
    source: imgUrl,
    blendingMode: 'overlay',
    position: ['center', 'center'],
    stretchMode: ['stretch-if-smaller', 'stretch-if-smaller']
};

Warto tu zaznaczyć ważną rzecz ⚠️

Granim nie posiada opcji typu background-size: cover.

Oznacza to, że jeśli obraz ma inne proporcje niż kontener, może zostać zniekształcony przy rozciąganiu.

Dlatego najlepszą praktyką jest przygotowanie grafiki w rozmiarze odpowiadającym kontenerowi slidera.
Jeśli obraz na wejściu ma właściwe proporcje, efekt będzie idealny i bez deformacji.

 

🔹 Wygląd ✨

W zakładce Wygląd można kontrolować:

• wysokość slidera,

• rozmiary nagłówków,

• kolory tekstu,

• pozycjonowanie treści,

• styl przycisków.

To pozwala dostosować moduł do identyfikacji wizualnej marki bez edycji CSS.

 

🔹 jQuery ⚙️

Moduł daje możliwość włączenia lub wyłączenia ładowania jQuery.

Jeżeli projekt już korzysta z jQuery — można uniknąć podwójnego ładowania.
Jeśli nie — moduł może je dostarczyć samodzielnie.

To daje elastyczność w różnych środowiskach projektowych.

 

🔹 Łuk SVG 🌙

Charakterystyczny łuk w dolnej części slidera również jest konfigurowalny:

• kolor łuku,

• grubość linii,

• możliwość wyłączenia.

To drobny detal wizualny, ale znacząco wpływa na odbiór sekcji hero.

DC Gradient Slider nie narzuca sztywnej struktury.
To elastyczne narzędzie, które można dostosować do różnych projektów — od prostych stron firmowych po bardziej zaawansowane realizacje.

To właśnie ta kontrola nad każdym parametrem sprawia, że moduł jest praktyczny w realnej pracy projektowej 🚀

 

5️⃣ Jak pobrać moduł 📥

DC Gradient Slider jest dostępny całkowicie bezpłatnie. Możesz pobrać go na dwa sposoby:

 

🌐 Strona projektu

Aktualną wersję modułu znajdziesz tutaj:
👉23

 

🧑‍💻 GitHub

Kod źródłowy dostępny jest publicznie na GitHub:
👉 

Repozytorium zawiera:

• pełny kod źródłowy,

• historię zmian,

• możliwość zgłaszania issue,

• opcję forkowania projektu.

•  

⚙️ Instalacja w Joomla

Instalacja przebiega standardowo:

1. Pobierz plik ZIP modułu.

2. Zaloguj się do panelu administracyjnego Joomla.

3. Przejdź do System → Rozszerzenia → Instaluj.

4. Wgraj paczkę ZIP modułu.

5. Po instalacji przejdź do Moduły, utwórz nową instancję DC Gradient Slider i przypisz ją do wybranej pozycji.

To wszystko. Moduł nie wymaga dodatkowej konfiguracji serwera ani specjalnych uprawnień.

 

6️⃣ Podsumowanie

DC Gradient Slider powstał z realnej potrzeby projektowej – nie jako eksperyment, ale jako odpowiedź na brak nowoczesnych, subtelnych i estetycznych sliderów w ekosystemie Joomla ✨

To moduł, który łączy:

• przemyślaną architekturę techniczną 🧠

• animowany gradient oparty o canvas 🎨

• kontrolę wizualną z poziomu backendu 🧩

• lekkość i wydajność 🚀

Nie narzuca stylu. Nie zamyka użytkownika w sztywnej strukturze. Daje kontrolę nad każdym kluczowym parametrem – od slajdów, przez kolory, po detal w postaci łuku SVG.

Kod jest otwarty, transparentny i możliwy do modyfikacji. Nie ma ukrytych mechanizmów, nie ma zależności od ciężkich frameworków. To rozwiązanie, które można bezpiecznie wdrożyć w realnym projekcie – firmowym, agencyjnym czy produktowym.

Jeśli szukasz slidera, który nie wygląda jak każdy inny – to właśnie takie narzędzie chciałem stworzyć.

A jeśli potrzebujesz wsparcia przy budowie strony internetowej 🌐 lub realizujesz projekt oparty o Joomla 🧩, zapraszam do kontaktu. Ten moduł jest tylko jednym z elementów większej filozofii tworzenia stron – świadomie, nowocześnie i z dbałością o detale.