Pokaz slajdów z efektem ruchu piasku na wydmie

Wiem że ostatnio męczyłem wszystkich płatnymi rozszerzeniami dla Opencart. Leżały w szufladzie i obiecywałem sobie że ruszę to w październiku. Słowa dotrzymałem i to koniec na razie - obiecuje 😇. 

Dzisiaj za to nagroda i petarda - slider który przełącza slajdy z efektem którego nigdzie indziej nie znajdziesz bynajmniej na dzień dzisiejszy 😉. Efekt ruchu piasku na wydmie. Sam efekt to długa historia która została opisana tutaj szerzej: "Sand Blow Effect for Images Using Three.js, WebGL and Shaders", potem powstał plugin js który też jest do pobrania na "SandSlider: Building a WebGL Image Slider with Sand Blow Transitions in Three.js". Teraz przyszedł czas by wspomóc się przy tworzeniu stron stron internetowych w Wordpress. 

Zobacz wideo:

 

🎨 Dlaczego kolejny slider do WordPressa?

WordPress ma ogromną liczbę wtyczek do tworzenia pokazów slajdów. Większość rozwiązuje jednak ten sam problem w podobny sposób: wyświetla zdjęcie, przesuwa je w bok, przyciemnia lub zastępuje następnym. Takie rozwiązania są praktyczne, ale trudno dziś nazwać je szczególnie oryginalnymi.

Problem zaczyna się wtedy, gdy zależy mi na czymś więcej niż poprawnej prezentacji kilku obrazów. Chcę zbudować nastrój, zwrócić uwagę na wybrany produkt albo sprawić, że odwiedzający zapamięta wizualną stronę serwisu.

Właśnie z takiego założenia powstał Design Cart Sand Slider. Nie próbuje zastępować wszystkich dostępnych sliderów. Koncentruje się na jednym efekcie przejścia — rozpadaniu się obrazu na drobne fragmenty przypominające piasek.

To niewielka różnica z punktu widzenia funkcji, ale duża z punktu widzenia odbioru strony. Zamiast kolejnej statycznej sekcji ze zdjęciami mogę stworzyć animowaną prezentację, która stanowi element identyfikacji wizualnej witryny.

 

✨ Jak działa efekt Sand Pixel?

Sercem wtyczki jest animacja wykorzystująca Three.js, czyli bibliotekę JavaScript umożliwiającą tworzenie grafiki z użyciem technologii WebGL.

Podczas przejścia aktualny obraz zostaje rozbity na drobne elementy. Cząsteczki zaczynają się rozpraszać, odsłaniając następny slajd. Dzięki temu zmiana fotografii przypomina stopniową dezintegrację obrazu, a nie standardowe przejście typu fade.

Administrator może regulować gęstość siatki, tempo rozpraszania, czas wyświetlania fotografii i sposób przyciemniania obrazu znajdującego się pod animacją. Pozwala to przygotować zarówno dynamiczny pokaz, jak i spokojniejszą prezentację, w której zdjęcia pozostają widoczne przez dłuższy czas.

Warto jednak pamiętać, że animacja cząsteczkowa jest bardziej wymagająca niż zwykła zmiana zdjęć. Na słabszych urządzeniach rozsądnie jest ograniczyć gęstość siatki i sprawdzić płynność działania.

 

⚙️ Co potrafi Design Cart Sand Slider?

Wtyczka nie ogranicza się do jednego pokazu slajdów. Pozwala tworzyć wiele niezależnych sliderów, z których każdy może zawierać własne zdjęcia, teksty i ustawienia animacji. Dzięki temu na stronie głównej mogę wykorzystać duży slider prezentacyjny, a w innych częściach witryny przygotować osobne pokazy produktów, realizacji czy projektów.

Najważniejsze możliwości to:

• Wiele niezależnych sliderów – każdy posiada własny identyfikator i shortcode.

• Dowolna liczba slajdów – dodawanie, usuwanie i zmiana kolejności metodą przeciągnij i upuść.

• Nagłówki i podnagłówki – osobne treści tekstowe dla każdego zdjęcia.

• Przyciski CTA – własna etykieta, adres URL i sposób otwierania linku.

• Konfiguracja animacji – czas zatrzymania, gęstość siatki, szybkość efektu i przyciemnianie.

• Autoplay i zapętlanie – automatyczne odtwarzanie pokazu.

• Nawigacja – strzałki poprzedni/następny oraz kropki paginacji.

• Personalizacja kolorów – osobne ustawienia tła, przycisków, obramowania i stanów hover.

• Shortcode – umieszczanie slidera we wskazanym miejscu strony.

• Przykładowy slider – pięć demonstracyjnych slajdów przygotowanych na start.

   

📥 Jak pobrać?

Tradycyjnie plugin pobierzesz z mojej strony lub z Github.

1

 

🚀 Instalacja wtyczki

Instalacja Design Cart Sand Slider odbywa się w standardowy sposób. W panelu WordPress przechodzę do Wtyczki → Dodaj nową wtyczkę → Wyślij wtyczkę na serwer, wybieram archiwum ZIP i uruchamiam instalację. Następnie aktywuję plugin.

Po aktywacji w panelu administracyjnym pojawia się sekcja Sand Slider. Wtyczka automatycznie tworzy również przykładowy pokaz składający się z pięciu slajdów. Dzięki temu mogę od razu sprawdzić sposób działania animacji, zanim rozpocznę tworzenie własnej prezentacji.

Wymagania wersji 1.0.0: WordPress 6.2 lub nowszy, PHP 7.4 lub nowszy. Licencja GPLv2 lub późniejsza.

 

🛠️ Tworzenie pierwszego slidera

W panelu Sand Slider tworzę nowy pokaz i nadaję mu nazwę. Następnie dodaję zdjęcia, korzystając z biblioteki mediów WordPressa. Każdy slajd może zawierać także nagłówek, krótki opis oraz przycisk przekierowujący do wskazanej podstrony.

Nie muszę przygotowywać wszystkich zdjęć w określonej kolejności. Slajdy można później przesuwać za pomocą mechanizmu drag & drop. Mogę również usuwać niepotrzebne elementy lub dodawać kolejne.

Konfiguracja została podzielona na zakładki odpowiedzialne za zawartość oraz ustawienia slidera. Dzięki temu zarządzanie treścią nie miesza się z konfiguracją animacji.

 

📋 Dokumentacja ustawień Design Cart Sand Slider

Zakładka zawartości – slajdy

Każdy slajd posiada własny zestaw pól:

 

Zakładka ustawień – kontener i dopasowanie obrazu

Pierwsza sekcja odpowiada za wymiary slidera oraz sposób wyświetlania zdjęć.

Tryb contain pozwala zmieścić całe zdjęcie w dostępnej przestrzeni, natomiast cover wypełnia obszar slidera, w razie potrzeby przycinając fragmenty fotografii.

 

Szerokość obrazu – pełny baner nie oznacza pełnego zdjęcia

Od wersji 1.0.2 Design Cart Sand Slider pozwala niezależnie kontrolować szerokość wyświetlanej fotografii i kontenera, w którym działa animacja. To przydatne rozwiązanie, gdy chcę zachować szerokie tło banera, ale sam obraz zaprezentować w mniejszej, wyśrodkowanej przestrzeni.

W ustawieniach Kontener / baner znajdę opcję „Szerokość obrazu”, obsługującą zarówno piksele ( px ), jak i wartości procentowe ( % ). Mogę przykładowo ustawić obraz na 50% szerokości banera albo nadać mu konkretną szerokość 800 px. Tło slidera nadal zajmuje całą dostępną szerokość, a zmienia się wyłącznie rozmiar ramki fotografii.

Mechanizm współpracuje również z trybem contain  , w którym proporcje zdjęcia mogły wcześniej wpływać na uzyskaną szerokość. Dzięki tej zmianie mam większą kontrolę nad kompozycją całej sekcji, bez konieczności dopisywania własnych reguł CSS.

 

Zakładka ustawień – animacja i tempo

To najważniejsza część konfiguracji, ponieważ bezpośrednio wpływa na charakter efektu Sand Pixel.

Przykładowo zwiększenie gęstości siatki pozwala uzyskać bardziej szczegółowy rozpad fotografii. Z kolei zmiana parametru Release span wpływa na tempo samego efektu. Warto eksperymentować, ponieważ odpowiednie ustawienia zależą zarówno od wielkości slidera, jak i charakteru wyświetlanych zdjęć.

 

Zakładka ustawień – zachowanie i nawigacja

W tej części konfiguracji znajdę pięć przełączników.

Zakładka ustawień – wygląd nawigacji

Nie chciałem ograniczać personalizacji do prostego wyboru jednego koloru. Dlatego administrator może osobno ustawić kolor ikon strzałek, ich tło i obramowanie oraz odpowiednie kolory po najechaniu kursorem. Podobne opcje przewidziano dla paginacji: kolor standardowej kropki, kolor hover i wyróżnienie aktywnego slajdu.

Dzięki temu nawigację można dopasować zarówno do jasnych, minimalistycznych stron, jak i ciemniejszych, bardziej kontrastowych projektów.

 

🚀 Zakładka „Wyświetlanie” – slider dokładnie tam, gdzie go potrzebuję

W wersji 1.0.2 postanowiłem rozbudować możliwości osadzania mojego slidera w WordPressie. Dotychczas korzystałem przede wszystkim z shortcode, który pozwalał umieszczać animację w treści wpisów i podstron. Jest to wygodne rozwiązanie, ale nie zawsze wystarczające. Co zrobić, gdy chcę wyświetlić slider bezpośrednio pod menu nawigacyjnym, nad główną zawartością strony albo w miejscu, do którego nie mam dostępu z poziomu edytora WordPressa?

Właśnie dlatego przygotowałem nową zakładkę „Wyświetlanie” . Pozwala ona automatycznie osadzać slider w wybranych miejscach witryny, bez konieczności edytowania plików motywu. Co ważne, nie ograniczyłem się do jednego sposobu integracji. Udostępniłem trzy różne metody, aby rozwiązanie można było dopasować zarówno do prostych stron firmowych, jak i bardziej rozbudowanych projektów WordPress.

 

Automatyczne wyświetlanie – gdzie i kiedy pokazać slider?

Pierwsza sekcja zakładki odpowiada za aktywowanie automatycznego wyświetlania i określenie, na których podstronach slider będzie widoczny. Mogę wyświetlać go na całej grupie stron lub ograniczyć do konkretnych adresów.

Opcja	Opis działania
Tryb	Wybieram pomiędzy „Tylko shortcode / PHP” a „Automatycznie na stronie”. Pierwsza opcja pozostawia ręczne osadzanie, druga aktywuje automatyczne wyświetlanie.
Strona główna	Slider pojawi się automatycznie na stronie głównej WordPressa.
Wpisy / strony (singular)	Animacja będzie wyświetlana na pojedynczych wpisach i stronach.
Główna + singular	Łączy wyświetlanie na stronie głównej oraz pojedynczych wpisach i stronach.
Wybrane ID stron/wpisów	Pozwala ograniczyć wyświetlanie wyłącznie do wskazanych stron i wpisów.
ID stron	Wpisuję identyfikatory oddzielone przecinkami, np. 12, 45, 78 . Pole wykorzystywane jest wyłącznie po wybraniu opcji „Wybrane ID”.

Takie rozwiązanie daje mi możliwość przygotowania różnych prezentacji dla poszczególnych części witryny. Przykładowo na stronie głównej mogę wyświetlić szeroki baner przedstawiający działalność firmy, natomiast na wybranych podstronach zastosować inne slidery prezentujące konkretne produkty lub realizacje.

 

Sposób wstawienia – trzy metody integracji z WordPressem

Druga sekcja odpowiada za miejsce osadzenia slidera w strukturze strony. To tutaj znajduje się jedna z najważniejszych funkcji, które dodałem w aktualizacji. Mogę skorzystać z selektora CSS, natywnego filtra treści WordPressa albo własnego hooka PHP.

1. Selektor CSS – swoboda umieszczania bez modyfikacji motywu

Jest to najbardziej uniwersalna metoda, szczególnie gdy chcę umieścić slider poza główną treścią artykułu. Wystarczy wskazać istniejący na stronie element HTML za pomocą jego identyfikatora lub klasy CSS. Mogę przykładowo użyć #content , #main , .site-content , #primary albo main.site-main .

Następnie określam pozycję slidera względem wskazanego elementu. Przygotowałem cztery możliwości:

Pozycja	Działanie
Przed elementem	Umieszcza slider bezpośrednio przed wskazanym elementem HTML.
Za elementem	Umieszcza slider bezpośrednio po wskazanym elemencie.
Na początku (wewnątrz)	Wstawia slider jako pierwszy element wewnątrz wskazanego kontenera.
Na końcu (wewnątrz)	Dodaje slider jako ostatni element wewnątrz wskazanego kontenera.

Załóżmy, że mój motyw posiada główny kontener #content , a ja chcę wyświetlić animowany baner pomiędzy nagłówkiem strony a jej właściwą zawartością. Wystarczy wpisać #content w pole „Selektor CSS” i wybrać pozycję „Przed elementem”. Wtyczka automatycznie odnajdzie wskazany kontener i umieści slider w odpowiednim miejscu.

Nie muszę tworzyć dodatkowego shortcode, ingerować w header.php ani przygotowywać własnego skryptu JavaScript. Warto jedynie pamiętać, że selektory CSS zależą od struktury konkretnego motywu WordPress.

 

2. Przed treścią (the_content) – wykorzystanie natywnego mechanizmu WordPressa

Drugą metodę oparłem na filtrze the_content , który odpowiada za przetwarzanie treści wpisów i stron. Po jego wybraniu wtyczka automatycznie dodaje slider przed główną zawartością wpisu lub podstrony, zgodnie z ustawionymi wcześniej warunkami wyświetlania.

To wygodne rozwiązanie, gdy chcę umieszczać ten sam baner nad treścią wybranych artykułów, stron informacyjnych lub innych obsługiwanych widoków, bez konieczności ręcznego dodawania shortcode do każdego z nich.

 

3. Własny hook PHP (action) – integracja z motywem i kodem WordPressa

Trzecią metodę przygotowałem z myślą o bardziej zaawansowanych wdrożeniach. WordPress i wiele jego motywów udostępniają akcje PHP, które pozwalają wykonywać dodatkowy kod w określonych miejscach strony.

W polu „Nazwa hooka PHP” mogę wskazać nazwę takiej akcji, np. astra_header_after dla motywu Astra lub generate_after_header dla GeneratePress. Wtyczka podepnie wówczas wyświetlanie slidera do wybranego hooka.

Mogę również wykorzystać własną akcję utworzoną w motywie potomnym, np. do_action('moja_sekcja_banera') . Dzięki temu zachowuję kontrolę nad strukturą strony, a zawartością slidera nadal zarządzam z panelu WordPressa. Warunkiem jest oczywiście istnienie i wykonanie wskazanej akcji przez motyw.

 

Shortcode i PHP – nadal dostępne niezależnie od automatycznego wyświetlania

Dodanie automatycznej integracji nie oznacza, że zrezygnowałem z dotychczasowych metod osadzania. W sekcji „Shortcode i PHP” pozostawiłem informacje o dwóch sposobach ręcznego wyświetlania slidera.

Pierwszy to klasyczny shortcode:

[dc_sand_slider id="123"]

Drugi umożliwia programistom umieszczenie slidera bezpośrednio w plikach motywu WordPress:

  
    <?php echo dc_sand_slider_render(123); ?>
  

W obu przykładach 123 oznacza identyfikator wybranego slidera. Dodałem również zabezpieczenie przed wielokrotnym renderowaniem tej samej instancji, co pomaga uniknąć przypadkowego powielania prezentacji podczas korzystania z różnych metod osadzania na jednej stronie.

 

Dlaczego zdecydowałem się na takie rozwiązanie?

Zależało mi na tym, aby Design Cart Sand Slider nie był kolejną wtyczką ograniczoną do umieszczania shortcode w edytorze treści. W rzeczywistych projektach WordPress często potrzebuję osadzić element dokładnie pomiędzy nagłówkiem a zawartością strony, nad listą wpisów lub w niestandardowym kontenerze przygotowanym przez motyw.

Dzięki zakładce „Wyświetlanie” mogę zrobić to bez tworzenia dodatkowych szablonów i ręcznego modyfikowania kodu. Administrator otrzymuje prostą konfigurację, a programista zachowuje możliwość wykorzystania hooków PHP oraz bezpośrednich wywołań funkcji.

W ten sposób mój Sand Slider może pełnić nie tylko funkcję animowanej galerii zdjęć, ale również samodzielnego banera prezentacyjnego, który umieszczam dokładnie tam, gdzie jest potrzebny. ✨

 

💡 Gdzie warto wykorzystać Sand Slider?

Efekt rozpadających się zdjęć nie musi pasować do każdej strony. W rozbudowanym panelu administracyjnym czy prostym formularzu kontaktowym prawdopodobnie będzie zbędny. Są jednak miejsca, w których może stanowić ciekawy element prezentacji.

Dobrym przykładem jest portfolio fotograficzne. Zdjęcia mogą zmieniać się w sposób bardziej widowiskowy niż w klasycznej galerii. Podobnie w przypadku stron artystów, projektantów czy agencji kreatywnych, gdzie sama forma prezentacji mówi coś o charakterze działalności.

Slider może też znaleźć zastosowanie na stronach produktów premium, w prezentacjach nowych kolekcji i na landing page'ach kampanii marketingowych. W takich przypadkach animacja pomaga stworzyć atmosferę, a nagłówki i przyciski CTA pozwalają skierować odwiedzającego do konkretnej oferty.

 

 

🔍 Wydajność i kwestie techniczne

Design Cart Sand Slider wykorzystuje Three.js i WebGL, dlatego efekt powstaje po stronie przeglądarki. Wtyczka nie wymaga przesyłania gotowych animacji wideo ani przygotowywania osobnego filmu dla każdego zestawu fotografii.

Nie oznacza to jednak, że animacja pozostaje bez wpływu na wydajność. Jej płynność zależy między innymi od możliwości urządzenia, wielkości obrazów i ustawionej gęstości siatki. Szczególnie na smartfonach warto sprawdzić działanie pokazu przed opublikowaniem strony.

Przygotowując zdjęcia, dobrze jest również zadbać o odpowiednie rozdzielczości i kompresję. Efekt wizualny nie zastępuje prawidłowej optymalizacji obrazów.

Zobacz też inne pluginy Wordpress do pokazu slajdów:

• Swiper.js dla Wordpress
• Prosty, lekki i darmowy slider dla WordPress

 

✅ Podsumowanie

Design Cart Sand Slider to propozycja dla osób, które chcą odejść od typowych przejść między slajdami i wprowadzić na stronę bardziej charakterystyczną animację. Rozpad fotografii na drobne cząsteczki, możliwość regulacji efektu, wiele niezależnych sliderów i prosty mechanizm shortcode tworzą narzędzie, które nie wymaga od administratora znajomości Three.js.

Nie jest to rozwiązanie niezbędne na każdej witrynie. Jeżeli jednak projekt opiera się na mocnych fotografiach i potrzebuje ciekawego sposobu ich prezentacji, Sand Slider może być interesującą alternatywą dla klasycznej karuzeli obrazów.

W końcu nie każde zdjęcie musi po prostu zniknąć, żeby zrobić miejsce następnemu. Czasem może rozsypać się w piasek. ✨