Design Cart 3D Carousel – gdy zwykła galeria zdjęć to za mało. Trójwymiarowa karuzela dla WordPressa

Jak prośba jednej klientki o coś wyjątkowego stała się początkiem projektu Design Cart 3D Carousel — darmowej wtyczki WordPress, która zamienia zwykłe zdjęcia w interaktywną, trójwymiarową przestrzeń z obracającymi się pierścieniami, kamerą, animacją i kolorową mgłą.

 

1. Wszystko zaczęło się od jednej prośby klientki

W mojej pracy nad stronami internetowymi najciekawsze projekty często zaczynają się od pozornie prostych pytań.

Tym razem klientka poprosiła mnie o coś wyjątkowego.

Nie chodziło jej o kolejną standardową galerię zdjęć, zwykły slider przesuwający fotografie od lewej do prawej ani popularną karuzelę, w której kilka obrazków obraca się wokół własnej osi.

Chciała czegoś, co przyciągnie uwagę. Czegoś, co nie będzie wyglądało jak gotowy element pobrany z biblioteki szablonów. Prezentacji zdjęć, która stanie się częścią charakteru całej strony.

To był dobry punkt wyjścia do eksperymentowania. 🙂

Zamiast szukać kolejnego gotowego slidera, zacząłem zastanawiać się, czy nie dałoby się zbudować galerii jako prawdziwej sceny trójwymiarowej.

Takiej, w której zdjęcia nie tylko przesuwają się w poziomie, ale tworzą pierścienie rozmieszczone w przestrzeni. Można obracać nimi, zmieniać perspektywę, oglądać kolejne rzędy i zatrzymać wybrane zdjęcie.

Do tego odpowiednie światło, przyciemnienie dalszych elementów i subtelna, poruszająca się mgła.

Z tej koncepcji narodził się Design Cart 3D Carousel.

Początkowo był to pomysł na indywidualny efekt dla konkretnej realizacji. Z czasem uznałem jednak, że szkoda ograniczać go do jednej strony.

Skoro udało się przygotować niezależny silnik karuzeli, mogłem rozbudować go o panel konfiguracji WordPressa i udostępnić również innym użytkownikom.

W ten sposób z indywidualnej potrzeby klientki powstała pełnoprawna wtyczka.

Tworzenie strony internetowej Wordpress z takim efektem zdecydowanie pozwala osiągnść wysoki stopień oryginalności w sieci.

 

2. Dlaczego kolejny slider WordPressa?

Na pierwszy rzut oka może się wydawać, że WordPress ma już wystarczająco dużo rozszerzeń do prezentowania zdjęć.

I rzeczywiście — wybór jest ogromny.

Możemy tworzyć klasyczne galerie, slidery, pokazy pełnoekranowe, karuzele produktów czy animowane siatki zdjęć.

Problem w tym, że większość takich rozwiązań opiera się na podobnej zasadzie: obrazy są umieszczone obok siebie, a użytkownik przegląda je za pomocą przycisków, gestów lub automatycznego przesuwania.

Nawet efekty określane jako 3D często są tylko transformacjami CSS nakładanymi na płaskie elementy.

Nie twierdzę, że takie rozwiązania są złe. W większości projektów sprawdzają się znakomicie.

Ale czasami zależy mi na czymś więcej niż poprawnej prezentacji fotografii.

Chcę, aby użytkownik miał wrażenie, że ogląda zdjęcia rozmieszczone w przestrzeni.

Żeby mógł samodzielnie zmieniać perspektywę, obracać kolejne warstwy, zatrzymywać animację i odkrywać fotografie na własnych zasadach.

Właśnie dlatego zdecydowałem się wykorzystać technologię Three.js.

 

3. Three.js — prawdziwa scena 3D zamiast zwykłego przesuwania obrazków

Three.js pozwala tworzyć i renderować trójwymiarowe sceny bezpośrednio w przeglądarce, wykorzystując między innymi WebGL.

W Design Cart 3D Carousel każde zdjęcie jest elementem przestrzennej kompozycji.

Obrazy rozmieszczane są wokół okręgu, a kolejne okręgi mogą tworzyć warstwy położone jedna nad drugą.

Kamera obserwuje całą konstrukcję z określonej perspektywy.

Dzięki temu możemy otrzymać efekt przypominający galerię zawieszoną w trójwymiarowej przestrzeni.

Uproszczony schemat koncepcji: fotografie ułożone na kilku pierścieniach w trójwymiarowej przestrzeni.

Nie jest to jedynie iluzja przesuwania prostokątów na płaskiej stronie.

To scena z własną geometrią, kamerą i animacją.

Najciekawsze jest jednak to, że użytkownik WordPressa nie musi znać Three.js, WebGL ani JavaScriptu, aby stworzyć własną karuzelę.

Całą konfigurację można wykonać w panelu administracyjnym.

 

4. Co potrafi Design Cart 3D Carousel?

Wtyczka oferuje znacznie więcej niż samo wyświetlanie zdjęć.

 

Wielowarstwowe pierścienie 3D

Od jednego do dwunastu rzędów zdjęć, rozmieszczonych wokół okręgu, z regulowaną średnicą, rozmiarem i odstępami.

   

Interaktywna kamera

Zbliżenie, położenie kamery, obracanie zdjęć, płynność ruchu i automatyczne ustawianie odpowiedniej warstwy.

   

Autoplay i sterowanie

Automatyczny obrót, zatrzymanie po najechaniu, obsługa rolki myszy, przyciski nawigacji i przyciąganie do najbliższego zdjęcia.

   

Animowana mgła shaderowa

Dwa kolory mgły, regulacja intensywności i prędkości, a także opcjonalnie przezroczyste tło.

   

Zarządzanie zdjęciami

Przesyłanie wielu fotografii, zmiana ich kolejności, teksty ALT oraz możliwość powiększenia zdjęcia po kliknięciu.

   

Shortcode WordPressa

Możliwość utworzenia wielu niezależnych karuzel i umieszczenia ich na wybranych stronach lub we wpisach.

Wszystkie te funkcje można skonfigurować osobno dla każdej karuzeli.

To ważne, ponieważ jeden projekt może wymagać spokojnej, eleganckiej prezentacji, a inny efektownej, dynamicznej sceny przypominającej futurystyczną galerię.

 

5. Instalacja Design Cart 3D Carousel w WordPressie

Wtyczkę przygotowałem jako standardowe rozszerzenie WordPressa. Nie trzeba instalować dodatkowych bibliotek ręcznie, konfigurować WebGL ani umieszczać własnego kodu JavaScript w motywie.

Biblioteka Three.js została dołączona do pakietu.

Instalacja przebiega następująco:

1. Pobieramy archiwum ZIP z wtyczką.

2. W panelu WordPressa wybieramy Wtyczki → Dodaj nową wtyczkę → Wyślij wtyczkę na serwer.

3. Wskazujemy pobrany plik i uruchamiamy instalację.

4. Aktywujemy Design Cart 3D Carousel.

5. W menu administracyjnym pojawi się nowa pozycja 3D Carousel.

Wymagania techniczne

Parametr	Wartość
Platforma	WordPress
Wersja wtyczki	1.0.1
Minimalna wersja WordPressa	6.2
Deklarowana kompatybilność	WordPress 7.1
Minimalna wersja PHP	7.4
Silnik graficzny	Three.js r128 / WebGL
Licencja	GPLv2 lub nowsza
Autor	Paweł Nosko
Producent	Design Cart

Ponieważ korzystamy z renderowania grafiki 3D, wydajność będzie zależała również od urządzenia i przeglądarki użytkownika.

Warto mieć to na uwadze, szczególnie przy rozbudowanych karuzelach zawierających wiele zdjęć.

 

6. Kokpit — zarządzanie karuzelami 3D

Po otwarciu zakładki 3D Carousel zobaczymy listę utworzonych karuzel.

Panel zaprojektowałem w stylistyce pozostałych narzędzi Design Cart. Zależało mi na przejrzystym interfejsie, w którym użytkownik nie musi zastanawiać się, gdzie szukać podstawowych funkcji.

Każda karuzela stanowi niezależny element.

Może mieć własne zdjęcia, liczbę pierścieni, kolorystykę, animację i ustawienia kamery.

Na liście znajdziemy jej nazwę, shortcode oraz liczbę przypisanych obrazów.

Funkcja	Działanie
Dodaj karuzelę	Tworzy nową karuzelę z ustawieniami domyślnymi.
Edytuj	Otwiera konfigurację istniejącej karuzeli.
Kopiuj	Tworzy kopię karuzeli wraz z konfiguracją i zdjęciami.
Usuń	Usuwa wybraną karuzelę.
Shortcode	Pokazuje kod do umieszczenia karuzeli na stronie.

Możliwość kopiowania przydaje się wtedy, gdy chcemy przygotować kilka podobnych galerii.

Można przykładowo skonfigurować odpowiednią geometrię, kamerę i mgłę, a następnie wykorzystać taki zestaw jako punkt wyjścia do kolejnych prezentacji.

 

7. Zakładka „Obrazy” — dodawanie i organizacja fotografii

3D Carousel → Edytuj karuzelę → Obrazy

Po utworzeniu karuzeli przechodzimy do jej edycji.

Panel został podzielony na dwie zakładki: Obrazy i Ustawienia.

W pierwszej zarządzamy zdjęciami, które pojawią się na trójwymiarowych pierścieniach.

 

7.1. Nazwa karuzeli

Na początku podajemy nazwę.

Może to być przykładowo „Portfolio fotografii”, „Nasze realizacje”, „Kolekcja produktów” albo „Galeria główna”.

Nazwa służy przede wszystkim do identyfikacji karuzeli w panelu administracyjnym. Nie jest automatycznie wyświetlana jako nagłówek nad galerią na stronie.

 

7.2. Przesyłanie zdjęć

Przygotowałem mechanizm pozwalający dodawać wiele plików jednocześnie.

Możemy przeciągnąć obrazy do wyznaczonego obszaru albo wybrać je z dysku za pomocą przycisku.

Obsługiwane formaty to:

JPG

JPEG

PNG

GIF

WebP

AVIF

Zdjęcia przechowywane są w osobnych katalogach przypisanych do każdej karuzeli:

  
    wp-content/uploads/design-cart-3d-carousel/{carousel-id}/
  

Dzięki temu pliki poszczególnych karuzel są uporządkowane i nie mieszają się ze sobą.

 

7.3. Kolejność i opisy alternatywne

Po przesłaniu zdjęć pojawiają się ich miniatury.

Możemy przeciągać je, zmieniając kolejność, usuwać niepotrzebne pliki oraz edytować opisy alternatywne.

Opcja	Przeznaczenie
Miniatura	Podgląd przesłanego zdjęcia.
Przeciągnij	Zmiana kolejności zdjęć.
Alt	Opis alternatywny obrazu.
Usuń	Usunięcie zdjęcia z karuzeli.

Teksty ALT warto wypełniać zgodnie z rzeczywistą zawartością fotografii. Chociaż karuzela jest renderowana w WebGL, wtyczka przechowuje te opisy w konfiguracji obrazów.

Nie traktowałbym jednak takiego rozwiązania jako pełnego zamiennika dostępnej dla czytników ekranu galerii HTML.

 

7.4. Optymalizacja zdjęć

Przy tradycyjnej galerii duże pliki mogą spowolnić ładowanie strony.

W przypadku sceny WebGL problem jest jeszcze ważniejszy, ponieważ obrazy stają się teksturami wykorzystywanymi przez silnik graficzny.

Dlatego w panelu umieściłem informację przypominającą o optymalizacji zdjęć oraz odnośnik do mojego narzędzia:

Design Cart Converter — optymalizacja i konwersja obrazów .

Warto kompresować fotografie przed przesłaniem. Samo wykorzystywanie nowoczesnego formatu nie oznacza jeszcze, że obraz będzie miał odpowiednio małą wagę.

 

8. Zakładka „Ustawienia” — kontrola nad trójwymiarową sceną

3D Carousel → Edytuj karuzelę → Ustawienia

Tutaj zaczyna się najciekawsza część całego projektu.

Większość ustawień dostępna jest za pomocą suwaków, przełączników i pól wyboru, dzięki czemu konfiguracja nie wymaga znajomości Three.js.

Panel podzieliłem na cztery sekcje: Wymiary i układ, Kamera i ruch, Kolorystyka i tło oraz Etykiety dostępności.

 

8.1. Wymiary i układ

Ta sekcja odpowiada za geometrię całej konstrukcji.

Możemy zdecydować, ile pierścieni ma posiadać karuzela, jak szeroko zostaną rozmieszczone fotografie i jak duże odstępy powinny znajdować się między nimi.

Opcja	Zakres / wartość domyślna	Opis
Wysokość	80vh	Wysokość kontenera, np. 600px lub 80vh .
Proporcje kontenera	Puste	Opcjonalne proporcje, np. 16 / 9 ; mają pierwszeństwo przed wysokością.
Liczba rzędów	1–12; domyślnie 3	Liczba pierścieni rozmieszczonych jeden nad drugim.
Zdjęć w okręgu	3–60; domyślnie 24	Liczba pozycji zdjęć wokół każdego pierścienia.
Wysokość zdjęcia (scena)	0,2–10; domyślnie 2,4	Rozmiar obrazu w jednostkach sceny 3D.
Proporcje zdjęć	0,3–4; domyślnie 1,5	Stosunek szerokości fotografii do wysokości.
Odstęp między zdjęciami	0–10; domyślnie 1,4	Odległość pomiędzy obrazami na pierścieniu.
Odstęp między rzędami	0–5; domyślnie 0,4	Odległość pionowa pomiędzy warstwami.
Średnica koła	Automatyczna	Pozwala samodzielnie narzucić średnicę pierścienia.

Liczba rzędów

To jeden z najbardziej charakterystycznych parametrów.

Zamiast jednej obracającej się karuzeli możemy stworzyć kilka niezależnie rozmieszczonych warstw zdjęć.

Schemat liczby pierścieni

3 rzędy

  Interaktywny schemat poglądowy rozmieszczenia warstw, nie podgląd renderera wtyczki.

Dwa lub trzy pierścienie mogą dobrze sprawdzić się w galerii portfolio, natomiast większa liczba pozwala stworzyć rozbudowaną instalację wizualną.

Trzeba tylko pamiętać, że większa liczba warstw i zdjęć oznacza większe zapotrzebowanie na zasoby urządzenia.

 

Automatyczna średnica koła

To również przydatna funkcja.

Nie trzeba ręcznie obliczać geometrii pierścienia za każdym razem, gdy zmieniamy rozmiar fotografii lub ich odstępy.

Pozostawienie pola średnicy pustego pozwala silnikowi wyliczyć odpowiednią wartość.

Jeżeli jednak chcemy uzyskać bardziej specyficzny efekt, możemy podać własną średnicę.

 

8.2. Kamera i ruch

Druga sekcja pozwala kontrolować sposób oglądania trójwymiarowej galerii.

W klasycznym sliderze zazwyczaj decydujemy tylko o szybkości przesuwania slajdów.

Tutaj możemy regulować znacznie więcej parametrów.

Opcja	Zakres / domyślnie	Znaczenie
Zbliżenie kamery	0,5–2,5; 1	Kontroluje skalę przybliżenia całej sceny.
Wysokość kamery	0–3; 1	Zmienia położenie kamery względem pierścieni.
Czułość rolki	0,0001–0,02; 0,0018	Określa, jak silnie karuzela reaguje na ruch rolki myszy.
Płynność ruchu	0,5–30; 6	Reguluje wygładzanie przejść.
Prędkość autoplay	0,01–2 rad/s; 0,07	Szybkość automatycznego obracania.
Szybkość ustawiania rzędów	0,5–30; 9	Określa dynamikę ustawiania właściwej warstwy.
Przyciemnienie tyłu	0–1; 1	Pozwala regulować przyciemnienie obrazów znajdujących się z tyłu.
Maks. gęstość pikseli	1–3; 2	Ogranicza rozdzielczość renderowania względem gęstości pikseli urządzenia.

Interakcja za pomocą rolki myszy

Wtyczka udostępnia trzy tryby:

Tryb	Działanie
Nad karuzelą	Rolka działa podczas interakcji z obszarem karuzeli.
Ctrl + rolka	Wymaga jednoczesnego użycia klawisza Ctrl.
Wyłączona	Wyłącza sterowanie rolką.

To ważne szczególnie na stronach zawierających dużo treści.

Nie zawsze chcemy, żeby karuzela przechwytywała przewijanie strony, gdy użytkownik próbuje po prostu przejść niżej.

Możliwość wyboru zachowania pomaga dopasować interakcję do konkretnego projektu.

Automatyczny obrót, snap i powiększanie

W tej samej sekcji znajdują się przełączniki odpowiedzialne za zachowanie galerii.

Opcja	Domyślnie	Działanie
Autoplay	Wyłączone	Automatyczny obrót karuzeli.
Pauza autoplay przy najechaniu	Włączona	Zatrzymuje autoplay podczas najechania kursorem.
Snap do najbliższego zdjęcia	Wyłączone	Przyciąga karuzelę do odpowiedniej pozycji zdjęcia.
Przyciski prev / next	Włączone	Pokazuje przyciski sterowania.
Powiększenie po kliknięciu	Włączone	Umożliwia otwarcie większego podglądu fotografii.
Opóźnienie popup	0–5000 ms; 380 ms	Reguluje czas przed otwarciem podglądu.

Szczególnie podoba mi się możliwość połączenia płynnego ruchu z opcjonalnym przyciąganiem do konkretnej pozycji.

Można uzyskać zarówno swobodne wrażenie obracania instalacji przestrzennej, jak i bardziej uporządkowaną nawigację.

Opóźnienie powiększenia pomaga natomiast odróżnić zwykłą interakcję z obracającą się galerią od zamiaru otwarcia zdjęcia.

 

8.3. Kolorystyka i tło — mgła, która buduje klimat

To jedna z moich ulubionych części projektu. 🌫️

Od początku nie chciałem, aby fotografie po prostu wisiały na jednolitym tle.

Zależało mi na atmosferze, która podkreśli wrażenie przestrzeni i głębi.

Dlatego dodałem efekt animowanej mgły shaderowej.

Możemy wybrać dwa kolory, określić intensywność i prędkość ich ruchu.

Opcja	Domyślnie	Opis
Kolor tła	#140c2b	Bazowy kolor sceny.
Mgła — kolor 1	#8b3dff	Pierwszy kolor mgły.
Mgła — kolor 2	#ff4fb8	Drugi kolor mgły.
Intensywność mgły	1	Zakres 0–1,5.
Prędkość mgły	1	Zakres 0–5.
Przezroczyste tło	Wyłączone	Pozwala wykorzystać tło strony zamiast pełnego tła karuzeli.

Domyślna kolorystyka łączy ciemny fiolet z różowo-fioletową poświatą.

Daje to efekt zbliżony do futurystycznej galerii zawieszonej w ciemnej przestrzeni.

Nie trzeba jednak ograniczać się do takiego stylu.

Przykładowe zestawienia kolorystyczne

Fioletowa noc Ocean Złota galeria Leśna mgła

Kolory: #140c2b / #8b3dff / #ff4fb8

Kopiuj Poglądowe palety do wykorzystania w konfiguracji — nie są gotowymi presetami zapisanymi we wtyczce.

Możemy stworzyć ciemną, tajemniczą scenerię, chłodną przestrzeń w odcieniach błękitu, elegancką prezentację w złotych tonacjach albo dopasować kolory do identyfikacji wizualnej firmy.

Dodatkowo możliwość włączenia przezroczystego tła pozwala łatwiej wkomponować karuzelę w wygląd strony.

 

8.4. Etykiety dostępności

Ostatnia sekcja konfiguracji zawiera trzy pola tekstowe.

Opcja	Domyślna wartość
Poprzednie	Poprzednie
Następne	Następne
Zamknij	Zamknij

Są to teksty wykorzystywane jako etykiety przycisków sterowania.

Można je zmieniać, na przykład podczas wdrażania strony w języku angielskim lub niemieckim.

To niewielki element, ale pozwala uniknąć pozostawiania polskich opisów w obcojęzycznym interfejsie.

 

9. Jak osadzić karuzelę 3D na stronie?

Po dodaniu zdjęć i zapisaniu ustawień otrzymujemy shortcode przypisany do utworzonej karuzeli.

Przykładowo:

  
    [dc_3d_carousel id="123"]
  

Gdzie 123 to identyfikator konkretnej karuzeli.

Wtyczka obsługuje także alternatywne nazwy shortcode: dc-3d-carousel oraz design-cart-3d-carousel .

Kod możemy umieścić w treści strony, wpisu blogowego lub elemencie kreatora stron obsługującym shortcode.

W praktyce pozwala to wykorzystać galerię na stronie głównej, w portfolio, sekcji prezentującej produkty albo na osobnej podstronie.

 

Kilka karuzel na jednej stronie

Możemy utworzyć wiele niezależnych karuzel, każdą z osobną konfiguracją.

Warto jedynie pamiętać, że aktualna implementacja nie renderuje dwukrotnie tej samej karuzeli o identycznym ID w ramach jednego żądania strony. Możemy natomiast osadzać różne karuzele o różnych identyfikatorach.

 

10. Wydajność — piękny efekt wymaga rozsądku

Grafika 3D daje ogromne możliwości, ale jest bardziej wymagająca niż tradycyjna galeria HTML.

W przypadku Design Cart 3D Carousel silnik musi przygotować scenę, wczytać tekstury, rozmieszczać je w przestrzeni i renderować animację.

Dlatego dodałem kilka możliwości ograniczania obciążenia, między innymi regulację gęstości pikseli renderowania, liczbę rzędów, liczbę zdjęć w pierścieniu oraz kontrolę animacji.

Warto stosować kilka podstawowych zasad:

• Przygotowywać zdjęcia w rozmiarach odpowiednich do faktycznej prezentacji.

• Korzystać z kompresji obrazów, szczególnie przy większych galeriach.

• Rozsądnie dobierać liczbę pierścieni i zdjęć.

• Testować gotową karuzelę na urządzeniach mobilnych i słabszych komputerach.

• Pamiętać, że liczba pozycji w pierścieniu oraz liczba wgranych fotografii to dwa różne parametry.

Domyślna konfiguracja trzech rzędów po 24 pozycje daje rozbudowaną przestrzenną kompozycję, ale nie oznacza, że każdy projekt musi korzystać z tak wielu zdjęć.

Nie zawsze więcej znaczy lepiej.

Często ciekawszy efekt uzyskamy z mniejszą liczbą dobrze dobranych fotografii i starannie ustawioną kamerą.

 

11. Gdzie warto wykorzystać Design Cart 3D Carousel?

Chociaż projekt powstał na potrzeby indywidualnej realizacji, szybko zauważyłem, że potencjalnych zastosowań jest znacznie więcej.

     

Portfolio fotograficzne

Szczególnie interesujące przy prezentacji fotografii artystycznych, mody, sesji reklamowych lub projektów kreatywnych.

       

Prezentacja kolekcji produktów

Możliwość stworzenia efektownej ekspozycji produktów, kolekcji odzieży, dodatków lub przedmiotów dekoracyjnych.

       

Galeria realizacji firmy

Nietypowy sposób przedstawienia projektów architektonicznych, wykonanych wnętrz, mebli czy innych realizacji.

       

Strony kreatywne i artystyczne

Trójwymiarowa karuzela może stanowić centralny element wizualny strony, a nie wyłącznie dodatek do jej treści.

 

Wideo prezentujące działanie karuzeli na 6 pierścieni:

Oczywiście nie polecałbym tak rozbudowanej animacji do każdej strony.

Jeżeli użytkownik chce szybko znaleźć numer telefonu, przeczytać regulamin albo wypełnić formularz, efektowna scena 3D może być niepotrzebna.

Ale tam, gdzie istotna jest estetyka, emocje i prezentacja wizualna, takie rozwiązanie potrafi nadać stronie zupełnie inny charakter.

 

12. Dlaczego zdecydowałem się udostępnić moduł za darmo?

Podczas pracy dla klientów powstaje sporo indywidualnych rozwiązań.

Czasami jest to niewielki skrypt JavaScript. Innym razem rozbudowany konfigurator, własny widget albo całkowicie nowy efekt wizualny.

Nie każdy projekt nadaje się do wykorzystania poza stroną, dla której powstał.

W przypadku Design Cart 3D Carousel sytuacja była jednak inna.

Silnik dało się oddzielić od konkretnej witryny i wyposażyć w uniwersalny panel administracyjny.

Uznałem więc, że warto przygotować go jako samodzielną wtyczkę.

Nie oznacza to, że tworzenie takiego rozwiązania było konieczne dla każdej strony WordPressa.

To narzędzie do dość specyficznych zastosowań.

Ale jeżeli ktoś szuka oryginalnego sposobu przedstawienia zdjęć, może zaoszczędzić sporo czasu, korzystając z gotowego rozszerzenia zamiast programować podobny efekt od podstaw.

I to jest dla mnie wystarczający powód, żeby udostępnić projekt innym.

 

13. Pobieranie Design Cart 3D Carousel

Wtyczka została udostępniona na licencji GPLv2 lub nowszej.

Design Cart 3D Carousel

Wersja 1.0.1 • WordPress • Three.js • GPLv2+

Interaktywne trójwymiarowe galerie zdjęć z animacją, sterowaniem kamery i konfigurowalną mgłą.

Po pobraniu i zainstalowaniu wystarczy utworzyć nową karuzelę, przesłać fotografie, ustawić parametry i wkleić shortcode w wybranym miejscu strony.

1

 

14. Podsumowanie — czasami warto zrobić coś inaczej

Design Cart 3D Carousel jest przykładem projektu, który prawdopodobnie nie powstałby, gdyby nie konkretna potrzeba klientki.

To właśnie takie nietypowe zamówienia często zmuszają mnie do wyjścia poza schemat.

Mogłem wykorzystać popularny slider i spróbować dostosować jego wygląd.

Mogłem też przygotować prostą karuzelę opartą na transformacjach CSS.

Zdecydowałem się jednak pójść nieco dalej i wykorzystać prawdziwą scenę trójwymiarową.

Efektem jest wtyczka, która pozwala budować wielowarstwowe galerie zdjęć, sterować kamerą, regulować animację, dodawać kolorową mgłę i dopasowywać całą przestrzeń do charakteru strony.

Nie twierdzę, że tradycyjne galerie przestały mieć sens. Przeciwnie — w wielu przypadkach są najlepszym rozwiązaniem.

Ale czasami klient nie szuka czegoś standardowego.

Czasami chce, żeby odwiedzający jego stronę zobaczył coś, czego nie spotyka codziennie.

I właśnie dla takich sytuacji powstał Design Cart 3D Carousel. 🙂