Animowane przejścia między stronami WordPress - gotowy plugin

Dobrze zaprojektowana strona internetowa powinna mieć własny charakter. Kolorystyka, typografia, układ sekcji, zdjęcia, animacje czy sposób prezentacji treści sprawiają, że użytkownik zapamiętuje witrynę i przestaje traktować ją jak kolejną stronę opartą na tym samym systemie CMS.

Jest jednak jeden element, który na ogromnej liczbie stron WordPress wygląda praktycznie identycznie: przejście z jednej podstrony do drugiej  a że w Design Cart tworzymy strony internetowe jak najbardziej kreatywne coś takiego jak Design Cart Pajax musiało powstać w końcu...no i powstało 🤓

Użytkownik klika link, stara strona znika, przeglądarka rozpoczyna ładowanie kolejnego dokumentu, przez chwilę pojawia się pusty ekran lub migotanie, a następnie wyświetla się nowa strona.

Niezależnie od tego, ile pracy zostało włożone w indywidualny projekt graficzny, w tym jednym momencie większość stron zachowuje się dokładnie tak samo.

 Design Cart Pajax powstał po to, aby zmienić właśnie ten element doświadczenia użytkownika. Teraz tworzenie stron internetowych na Wordpress może być bardziej oryginalne. 

Wtyczka dodaje do WordPressa animowane przejścia pomiędzy podstronami. Zamiast zwykłego przeładowania można zastosować jedno z sześciu efektownych przejść wykorzystujących m.in. GSAP, SVG, maski CSS oraz WebGL.

Administrator może wybrać efekt, dopasować kolorystykę, ustawić jego prędkość i zdecydować, czy kompatybilne strony mają być wczytywane przy użyciu PJAX, czyli bez tradycyjnego przeładowania całego dokumentu.

W efekcie nawet zwykłe kliknięcie w pozycję menu może stać się częścią identyfikacji wizualnej witryny.

 

Po co animować przejścia między stronami?

W projektowaniu stron internetowych często skupiamy się na pojedynczym ekranie.

Projektujemy stronę główną, podstronę oferty, realizacje, blog, kontakt czy stronę produktu. Każda z nich może wyglądać bardzo dobrze oddzielnie.

Użytkownik nie korzysta jednak z witryny jako zbioru niezależnych ekranów.

Porusza się pomiędzy nimi.

I właśnie ten moment może zostać wykorzystany jako dodatkowy element projektu.

Dobrze dobrane przejście:

• wizualnie łączy poszczególne podstrony,

• zmniejsza wrażenie „przeskakiwania” pomiędzy osobnymi dokumentami,

• pozwala stworzyć charakterystyczny styl nawigacji,

• może podkreślić nowoczesny albo kreatywny charakter witryny,

• sprawia, że nawet prosta struktura WordPressa staje się bardziej indywidualna.

Design Cart Pajax nie próbuje zmieniać wyglądu samej strony.

Zmienia sposób poruszania się po niej .

To ważna różnica.

Można więc zastosować wtyczkę zarówno na witrynie zbudowanej od podstaw, jak i na już istniejącej stronie, której wyglądu nie chcemy przebudowywać.

 

Czym jest Design Cart Pajax?

Design Cart Pajax jest wtyczką dla WordPressa dodającą animowane przejścia pomiędzy stronami oraz opcjonalną nawigację PJAX.

W wersji 1.1 wtyczka wykorzystuje sześć efektów przejść inspirowanych realizacjami opisanymi przez Iqbala Muthahhary'ego w Codrops.

Dostępne efekty to:

1. Cielrose

2. Faint

3. MorphSVG

4. Bloom

5. Truus

6. Leandra

Każdy z nich wykorzystuje inną technikę animacji.

Wtyczka pozwala również:

• zmienić kolor nakładki,

• zmienić kolor tekstu efektu Bloom,

• regulować prędkość przejścia w zakresie od 25% do 200%,

• zmienić tekst wyświetlany w efekcie Bloom,

• zobaczyć podgląd przejścia bezpośrednio w panelu administratora,

• włączyć lub wyłączyć PJAX,

• określić selektor kontenera z główną treścią,

• wykluczać wskazane adresy z nawigacji PJAX,

• wyłączać PJAX dla pojedynczych linków,

• korzystać ze zdarzeń JavaScript i filtra PHP przy własnych integracjach.

Domyślna konfiguracja wykorzystuje efekt Cielrose, prędkość 100%, ciemny kolor nakładki #020403 , jasny kolor tekstu #ece9e4 oraz tekst „Not all is lost”.

 

PJAX – czyli przejście strony bez pełnego przeładowania

Jednym z najważniejszych elementów Design Cart Pajax jest obsługa PJAX.

W tradycyjnej nawigacji kliknięcie odnośnika powoduje pobranie całego nowego dokumentu HTML. Przeglądarka ponownie przetwarza nagłówek strony, skrypty, style i pozostałe zasoby.

Przy PJAX kompatybilna strona może zostać pobrana w tle, a następnie w dokumencie zostaje podmieniony tylko główny kontener treści.

Design Cart Pajax aktualizuje przy tym również m.in.:

• document.title ,

• meta description,

• robots,

• Open Graph,

• dane Twittera,

• canonical,

• alternate/hreflang,

• atrybuty języka dokumentu,

• klasy body ,

• stan standardowego menu WordPressa.

Dzięki temu można uzyskać znacznie bardziej płynne przejście pomiędzy podstronami.

Nie oznacza to jednak, że wtyczka próbuje na siłę używać PJAX wszędzie.

To bardzo ważny element jej konstrukcji.

 

Bezpieczny fallback zamiast wymuszania PJAX

Nie każda strona powinna być podmieniana częściowo.

Niektóre podstrony wymagają ponownego wykonania skryptów, inicjalizacji formularzy, załadowania nowych komponentów albo pełnego cyklu WordPressa.

Design Cart Pajax rozpoznaje takie sytuacje i w razie potrzeby wraca do zwykłego przeładowania strony.

Do elementów powodujących rezygnację z podmiany PJAX należą m.in.:

• formularze,

• elementy iframe ,

• video ,

• audio ,

• canvas ,

• skrypty umieszczone w zmienianym kontenerze,

• elementy oznaczone data-pjax-reload ,

• komponenty Elementor,

• komponenty korzystające z WordPress Interactivity API.

Dodatkowo wtyczka porównuje zestaw skryptów i arkuszy stylów pomiędzy aktualną a docelową stroną.

Jeżeli wymagane zasoby się różnią, pełne przeładowanie jest bezpieczniejsze niż częściowa podmiana zawartości.

To świadome założenie projektu: animacja nie może odbywać się kosztem poprawnego działania strony .

 

WooCommerce i strony wymagające pełnego przeładowania

Design Cart Pajax posiada osobne zabezpieczenia dla WooCommerce.

Koszyk, checkout i konto klienta zachowują klasyczną nawigację.

W logice wtyczki sprawdzane są m.in.:

• is_woocommerce ,

• is_cart ,

• is_checkout ,

• is_account_page .

Adresy koszyka, kasy oraz konta klienta są również dodawane do listy blokowanych ścieżek przekazywanej do frontendu.

Ma to praktyczne znaczenie.

Proces zakupowy często wykorzystuje dodatkowe sesje, dynamiczne fragmenty, walidację formularzy, skrypty płatności czy aktualizację koszyka. Pełne przeładowanie jest w takich miejscach znacznie bezpieczniejsze.

Wtyczka nie próbuje więc zamieniać całego WordPressa w aplikację SPA.

PJAX jest używany tam, gdzie ma to sens.

 

Sześć efektów przejścia

 

01. Cielrose – skala i odsłonięcie strony

Cielrose jest domyślnym efektem wtyczki.

Aktualna strona zostaje pomniejszona do skali około 0.6 , a nowa strona jest odsłaniana za pomocą animacji maski. Następnie nowa zawartość powiększa się do pełnego rozmiaru.

Efekt daje wrażenie, jakby aktualna strona odsuwała się w głąb, pozwalając nowej stronie wejść na pierwszy plan.

W konfiguracji źródłowej poszczególne fazy wykorzystują czas 1,25 sekundy przy ustawieniu prędkości 100%.

Cielrose jest jednym z dwóch efektów, które animują jednocześnie aktualną i następną stronę.

 

02. Faint – przejście WebGL

Faint wykorzystuje Three.js i shader WebGL.

Zamiast klasycznej maski CSS pomiędzy stronami pojawia się efekt generowany przez GPU.

W animacji sterowana jest wartość uProgress , która zmienia się pomiędzy określonymi wartościami, tworząc efekt przejścia bazujący na szumie.

Do renderowania wykorzystywane są:

• THREE.Scene ,

• PerspectiveCamera ,

• WebGLRenderer ,

• PlaneGeometry ,

• ShaderMaterial .

Ten efekt wymaga obsługi WebGL2.

Jeżeli przeglądarka nie pozwala na jego poprawne uruchomienie, wtyczka przechodzi do zwykłej nawigacji zamiast blokować użytkownika.

 

03. MorphSVG – płynna krzywa

MorphSVG wykorzystuje animowaną ścieżkę SVG.

Krzywa rozwija się tak, aby stopniowo zasłonić aktualną stronę, po czym zmienia kształt i odsłania kolejną.

Animowane są konkretne wartości atrybutu d ścieżki SVG.

W praktyce daje to bardzo organiczny efekt, zupełnie inny niż klasyczna kurtyna czy prostokątna nakładka.

 

04. Bloom – pasek i animowany tekst

Bloom jest najbardziej tekstowym spośród dostępnych przejść.

Na ekranie pojawia się poziomy pasek, który rozszerza się do pełnej powierzchni ekranu. Na nakładce może zostać wyświetlony tekst.

Domyślnie jest to:

Not all is lost

Tekst może jednak zostać zmieniony w konfiguracji.

Do animacji poszczególnych słów używany jest SplitText. Efekt może więc pełnić nie tylko funkcję wizualnego przejścia, ale również krótkiego komunikatu brandingowego.

Można użyć np.:

• nazwy marki,

• krótkiego sloganu,

• hasła reklamowego,

• komunikatu „Loading the next story”,

• dowolnego krótkiego tekstu pasującego do charakteru projektu.

 

05. Truus – rysowana spirala SVG

Truus wykorzystuje dużą spiralną ścieżkę SVG.

Animacja oparta jest m.in. na DrawSVG.

Ścieżka jest stopniowo rysowana, a jej grubość zwiększa się ze 100 do 400, dzięki czemu spirala ostatecznie przykrywa cały ekran.

Po przejściu proces odbywa się w odwrotnym kierunku.

Efekt jest bardzo charakterystyczny i dobrze pasuje do stron kreatywnych, portfolio, studiów projektowych czy witryn, które celowo odchodzą od klasycznej stylistyki biznesowej.

 

06. Leandra – wielokątna maska

Leandra odsłania kolejną stronę za pomocą animowanej maski wielokątnej.

Nowa strona początkowo widoczna jest tylko w niewielkim obszarze, który następnie rozszerza się aż do pełnego ekranu.

Dodatkowy pseudoelement tworzy kolejny etap przejścia.

Podobnie jak Cielrose, Leandra należy do efektów synchronizowanych, które mogą wizualnie pracować jednocześnie na obrazie starej i nowej strony.

 

Technologie wykorzystywane przez wtyczkę

Design Cart Pajax korzysta z kilku bibliotek i technik frontendowych.

W paczce znajdują się lokalnie:

• GSAP 3.14.2 ,

• CustomEase,

• SplitText,

• MorphSVGPlugin,

• DrawSVGPlugin,

• Three.js 0.183.2 .

Biblioteki nie są pobierane z zewnętrznego CDN.

Oznacza to, że działanie przejść nie zależy od dostępności zewnętrznego serwera z biblioteką JavaScript.

Sam router Barba.js nie jest ładowany. Integracja nawigacji została przygotowana bezpośrednio pod WordPress.

 

Wymagania

Według pliku readme.txt wtyczka wymaga:

Wymaganie	Wartość
WordPress	minimum 6.2
PHP	minimum 7.4
Testowana wersja WordPress	do 7.1
Wersja wtyczki	1.1.3
Licencja	GPLv2 lub nowsza

W przypadku efektu Faint potrzebna jest dodatkowo przeglądarka obsługująca WebGL2.

 

Instalacja Design Cart Pajax

Instalacja nie różni się znacząco od instalacji większości wtyczek WordPress.

 

Jak pobrać?

...no tradycyjnie, z naszej strony lub Github. Poniżej linki.

0

 

Krok 1 – wgranie plików

Folder:

design-cart-pajax

należy umieścić w katalogu:

/wp-content/plugins/

Można zrobić to np. przez FTP, menedżer plików hostingu albo standardowy mechanizm instalacji paczki ZIP w WordPressie, jeżeli dysponujemy spakowaną wersją wtyczki.

 

Krok 2 – aktywacja

W panelu WordPress przechodzimy do:

Wtyczki → Zainstalowane wtyczki

i aktywujemy:

Design Cart Pajax

 

Krok 3 – konfiguracja

Po aktywacji ustawienia dostępne są pod:

Ustawienia → Design Cart Pajax

Na stronie konfiguracji znajdują się trzy główne zakładki:

• Ogólne,

• Efekt i kolory,

• Zaawansowane.

 

Konfiguracja – zakładka „Ogólne”

Pierwsza zakładka odpowiada za podstawowy sposób działania wtyczki.

Dostępne opcje

Opcja	Znaczenie
Włącz animowane przejścia	Główny przełącznik działania efektów
Wczytuj zgodne strony bez przeładowania (PJAX)	Włącza częściową podmianę zawartości dla kompatybilnych stron

 

Włącz animowane przejścia

To główny przełącznik wtyczki.

Po jego wyłączeniu animacje na froncie nie są inicjalizowane.

Po włączeniu efekt pojawia się przy przechodzeniu przez obsługiwane linki wewnętrzne.

Wtyczka respektuje jednocześnie ustawienie systemowe:

prefers-reduced-motion: reduce

Jeżeli użytkownik ograniczył animacje w swoim systemie lub przeglądarce, przechwytywanie linków i efekty są automatycznie wyłączane.

To ważny element dostępności.

 

Wczytuj zgodne strony bez przeładowania – PJAX

Po włączeniu tej opcji kompatybilne podstrony mogą być pobierane przez fetch() i podmieniane bez przeładowania całego dokumentu.

Nie oznacza to jednak, że wszystkie linki automatycznie działają w PJAX.

Wtyczka najpierw sprawdza zgodność aktualnej i docelowej strony.

Jeżeli warunki nie zostaną spełnione, wykonywana jest zwykła nawigacja.

Dzięki temu użytkownik nadal otrzymuje animację tam, gdzie jest to możliwe, ale wtyczka nie ryzykuje uszkodzenia działania bardziej złożonych podstron.

 

Konfiguracja – zakładka „Efekt i kolory”

To główna sekcja odpowiedzialna za wygląd przejścia.

Znajdują się tutaj:

• wybór efektu,

• prędkość,

• tekst Bloom,

• kolor nakładki,

• kolor tekstu Bloom,

• interaktywny podgląd.

 

Rodzaj przejścia

Numer	Efekt	Charakter przejścia
01	Cielrose	skala i odsłonięcie strony
02	Faint	szum WebGL
03	MorphSVG	płynna krzywa SVG
04	Bloom	pasek i animowany tekst
05	Truus	rysowana spirala SVG
06	Leandra	maska następnej strony

Wybór efektu determinuje główny styl animacji.

 

Prędkość animacji

Pole pozwala wpisać wartość od:

25% do 200%

z krokiem co 5%.

Kod walidacji dodatkowo pilnuje, aby wartość nigdy nie znalazła się poza zakresem 25–200.

 

Jak interpretować wartości?

100% odpowiada oryginalnemu timingowi przejścia.

200% oznacza dwukrotnie szybsze odtwarzanie.

50% oznacza wolniejszą animację.

Ważne jest również to, że mechanizm nie zmienia ręcznie czasu każdego pojedynczego elementu animacji. Skaluje cały timeline, dzięki czemu zachowane zostają relacje czasowe i nakładanie poszczególnych etapów.

 

Tekst przejścia Bloom

Opcja dotyczy efektu numer 04.

Domyślna wartość:

Not all is lost

Tekst może mieć maksymalnie 160 znaków.

Można tutaj zastosować własny tekst związany z marką.

Przy bardziej stonowanych stronach najlepiej sprawdzi się krótki slogan.

W bardziej kreatywnych projektach przejście może być częścią narracji całej strony.

 

Kolor nakładki / tła przejścia

Opcja określa główny kolor stosowany przez efekty.

Domyślna wartość:

#020403

Kolor jest zapisywany jako poprawna wartość HEX i wykorzystywany przez poszczególne techniki przejścia.

Przykładowo w Faint jest przeliczany na wartości RGB i przekazywany bezpośrednio do uniformu shadera Three.js.

Dzięki temu efekt można dopasować do kolorystyki marki.

 

Kolor tekstu przejścia Bloom

Domyślna wartość:

#ece9e4

Kolor dotyczy tekstu wyświetlanego przez efekt Bloom.

Przy konfiguracji warto zachować odpowiedni kontrast względem koloru nakładki.

 

Podgląd efektu

W panelu znajduje się specjalny obszar demonstracyjny oznaczony:

CODROPS · PODGLĄD PRZEJŚCIA

oraz przycisk:

Odtwórz przejście .

Podgląd korzysta z tego samego silnika przejść co frontend.

Pozwala więc przetestować efekt, prędkość i kolorystykę bez konieczności ciągłego przechodzenia pomiędzy podstronami witryny.

To szczególnie wygodne przy dobieraniu prędkości.

Animacja, która wygląda efektownie przy pierwszym uruchomieniu, może okazać się zbyt długa podczas regularnego korzystania z witryny.

 

Konfiguracja – zakładka „Zaawansowane”

Zakładka Zaawansowane odpowiada głównie za kompatybilność PJAX z konkretnym motywem lub strukturą witryny.

Znajdują się tutaj dwie podstawowe opcje:

Opcja	Zastosowanie
Selektor kontenera treści	Określa element strony podmieniany przez PJAX
Wykluczone ścieżki	Określa adresy, które mają korzystać ze zwykłej nawigacji

 

Selektor kontenera treści

Domyślna wartość:

main, #main, #content

Wtyczka analizuje podane selektory po kolei.

Wybierany jest pierwszy selektor, który odpowiada dokładnie jednemu elementowi dokumentu.

Element html oraz body nie może być używany jako kontener PJAX.

Kontener powinien obejmować całą treść, która zmienia się pomiędzy podstronami.

W wielu klasycznych motywach będzie to:

main

W innych:

#main

albo:

#content

Jeżeli motyw wykorzystuje niestandardową strukturę HTML, można podać własny selektor.

Przykładowo:

.site-content

 

Wykluczone ścieżki

Pole pozwala wskazać adresy, które zawsze mają korzystać ze zwykłej nawigacji.

Każdą ścieżkę należy umieścić w osobnym wierszu.

Przykład:

/kontakt/

/rezerwacja/

Wykluczenie obejmuje również podstrony.

Jeżeli więc dodamy:

/konto/

to wykluczone zostaną również np.:

/konto/zamowienia/

/konto/dane/

Mechanizm porównuje początek ścieżki, a nie wyłącznie identyczny adres.

 

Wyłączenie PJAX tylko dla pojedynczego linku

Nie zawsze trzeba wykluczać całą sekcję.

Jeżeli zwykła nawigacja potrzebna jest tylko dla jednego odnośnika, można zastosować atrybut:

data-no-pjax

Przykład:

<a href="/kontakt/" data-no-pjax>Kontakt</a>

Taki link nie zostanie przejęty przez mechanizm PJAX.

 

Jakie linki wtyczka pomija automatycznie?

Mechanizm nawigacji posiada szereg dodatkowych zabezpieczeń.

Nie przechwytuje m.in.:

• linków do innych domen,

• linków z parametrami query string,

• pobieranych plików,

• linków z download ,

• plików PDF,

• ZIP,

• RAR,

• obrazów,

• audio,

• video,

• dokumentów DOC/DOCX,

• XLS/XLSX,

• plików XML, JSON i CSV,

• adresów wp-admin ,

• wp-json ,

• wp-content ,

• wp-includes ,

• wp-login.php ,

• feedów,

• linków otwieranych w innym oknie,

• elementów oznaczonych jako zewnętrzne,

• linków w pasku administratora,

• standardowych przycisków AJAX WooCommerce.

Nie jest również przechwytywana nawigacja wymagająca klawiszy modyfikujących, np. Ctrl+klik czy Shift+klik.

 

Back i Forward w przeglądarce

Wtyczka korzysta z history.pushState() przy prawidłowej nawigacji PJAX.

Jednocześnie obsługa przycisków Wstecz/Dalej jest celowo konserwatywna.

Jeżeli wykryty zostanie stan utworzony przez Pajax, wykonywane jest przeładowanie strony.

Ma to zapobiec sytuacji, w której po kilku częściowych podmianach DOM nie odpowiadałby rzeczywistemu stanowi aplikacji lub skryptów.

 

Co dzieje się podczas prawdziwego przejścia PJAX?

Gdy strona spełnia wszystkie warunki kompatybilności, proces wygląda w uproszczeniu następująco:

1. użytkownik klika link,

2. wtyczka pobiera dokument docelowy przez fetch ,

3. znajduje kontener treści aktualnej i docelowej strony,

4. sprawdza zgodność zasobów,

5. sprawdza brak komponentów wymagających pełnego przeładowania,

6. uruchamia zdarzenie dcpajax:before ,

7. rozpoczyna animację,

8. podmienia główny kontener,

9. aktualizuje dane dokumentu,

10. ustawia nowy adres za pomocą History API,

11. ustawia fokus w nowej treści,

12. emituje dcpajax:after ,

13. usuwa elementy animacji.

Nagłówek witryny pozostaje aktywny.

Nie jest zastępowany kopią, dzięki czemu jego event listenery mogą nadal działać.

 

Co dzieje się, gdy PJAX nie może zostać użyty?

Wtedy Design Cart Pajax stosuje fallback.

Dla efektów nakładkowych może rozpocząć animację jeszcze na aktualnej stronie, zapisać informacje o przejściu w sessionStorage , a następnie wykonać zwykłą nawigację.

Na stronie docelowej bardzo wcześnie uruchamiany jest mały skrypt arrival.js .

Jego zadaniem jest utworzenie zasłony jeszcze przed pierwszym renderem strony docelowej, dzięki czemu nie powinno pojawić się przypadkowe mignięcie treści przed zakończeniem animacji.

Jeżeli skrypty nie uruchomią się poprawnie, mechanizm posiada timeout i usuwa zasłonę.

Czyli nawet awaria efektu nie powinna pozostawić użytkownika z zakrytym ekranem.

 

Dostępność i ograniczenie ruchu

Design Cart Pajax respektuje:

prefers-reduced-motion: reduce

Jeżeli użytkownik ma w systemie włączone ograniczenie animacji:

• animacje są wyłączane,

• linki nie są przechwytywane,

• strona zachowuje standardową nawigację.

W czasie ładowania stosowane są również:

• aria-busy ,

• ukryty element statusu z aria-live="polite" ,

• przeniesienie fokusu do nowej treści po zmianie strony.

 

Integracja dla developerów

Design Cart Pajax udostępnia dwa zdarzenia JavaScript.

 

dcpajax:before

Zdarzenie jest emitowane przed podmianą treści.

Dostępne dane:

• detail.url ,

• detail.current ,

• detail.next .

Zdarzenie jest anulowalne.

Wywołanie:

event.preventDefault()

powoduje rezygnację z PJAX i wymuszenie zwykłej nawigacji.

Może to być przydatne np. dla własnego komponentu wymagającego pełnej inicjalizacji.

 

dcpajax:after

Emitowane po podmianie zawartości.

Udostępnia:

• detail.url ,

• detail.container .

Można wykorzystać je do ponownego uruchomienia własnego JavaScriptu na nowo załadowanej treści.

 

Filtr PHP design_cart_pajax_allowed

Developerzy mogą również wyłączyć PJAX na poziomie PHP.

Wtyczka udostępnia filtr:

design_cart_pajax_allowed

Zwrócenie false powoduje wyłączenie PJAX dla aktualnej strony.

Daje to możliwość tworzenia bardziej złożonych reguł niż lista ścieżek w panelu.

 

Oryginalność strony nie kończy się na jej wyglądzie

W projektach WordPress bardzo łatwo dojść do sytuacji, w której dwie strony korzystające z zupełnie innych grafik i kolorów nadal zachowują się podczas nawigacji niemal identycznie.

Design Cart Pajax dodaje jeszcze jeden poziom personalizacji.

Nie zmienia tylko tego, jak strona wygląda .

Pozwala zmienić również to, jak użytkownik jej doświadcza .

Subtelne Cielrose może być zastosowane na eleganckiej stronie firmowej.

Bloom może stać się elementem identyfikacji kreatywnego studia.

Truus może pasować do eksperymentalnego portfolio.

Faint z WebGL może być ciekawym wyborem dla strony technologicznej.

MorphSVG pozwala uzyskać miękkie, organiczne przejście.

Leandra może podkreślić bardziej designerski charakter projektu.

Dzięki regulacji kolorów i prędkości ten sam efekt może wyglądać zupełnie inaczej w dwóch różnych witrynach.

 

Najczęstsze pytania

Czy wszystkie strony działają w PJAX?

Nie.

Wtyczka wykorzystuje PJAX tylko wtedy, gdy aktualna i docelowa strona są kompatybilne.

Formularze, skrypty, multimedia, WooCommerce oraz inne dynamiczne komponenty mogą spowodować użycie klasycznego przeładowania.

Czy animacja wtedy całkowicie znika?

Niekoniecznie.

W zależności od wybranego efektu wtyczka może nadal odtworzyć przejście, a dopiero w jego trakcie wykonać zwykłą nawigację.

Czy można wykluczyć konkretną stronę?

Tak.

W zakładce Zaawansowane można dodać ścieżkę do listy wykluczeń.

Można również zastosować data-no-pjax przy pojedynczym odnośniku.

Czy Faint działa na każdej przeglądarce?

Efekt wykorzystuje WebGL.

Jeżeli wymagane możliwości renderowania nie są dostępne, wtyczka stosuje standardową nawigację.

Czy biblioteki są pobierane z CDN?

Nie.

GSAP i Three.js są dostarczane lokalnie razem z wtyczką.

Czy można zmienić szybkość efektu?

Tak.

Zakres wynosi 25–200%.

100% oznacza oryginalne tempo animacji.

Czy można zmienić kolory?

Tak.

Administrator może ustawić:

• kolor nakładki,

• kolor tekstu efektu Bloom.

Czy można zmienić tekst wyświetlany podczas przejścia?

Tak.

Dotyczy to efektu Bloom.

Tekst może mieć maksymalnie 160 znaków.

 

Podsumowanie

Design Cart Pajax rozwiązuje problem, który często jest pomijany podczas projektowania stron WordPress.

Tworząc indywidualną witrynę, dopracowujemy wygląd nagłówka, sekcji, przycisków, typografii, animacji czy zdjęć, ale sam sposób przechodzenia pomiędzy stronami pozostaje standardowy.

Wtyczka pozwala potraktować nawigację jako kolejny element designu .

Do dyspozycji otrzymujemy sześć różnych przejść, możliwość zmiany kolorystyki i prędkości, podgląd bezpośrednio w panelu oraz opcjonalne wykorzystanie PJAX.

Jednocześnie mechanizm nie próbuje zastępować standardowej nawigacji za wszelką cenę.

WooCommerce, formularze, multimedia, strony z odmiennymi zasobami i inne elementy wymagające pełnej inicjalizacji mogą korzystać z klasycznego przeładowania.

Dzięki temu Pajax może pełnić rolę warstwy wizualnej i nawigacyjnej na istniejącym WordPressie, bez konieczności przebudowy całej witryny jako aplikacji SPA.

Najważniejszą zaletą nie jest więc samo to, że „strony się animują”.

Najważniejsze jest to, że przejście pomiędzy podstronami może stać się częścią charakteru projektu .

A właśnie takie drobne elementy często sprawiają, że użytkownik nie ma wrażenia kontaktu z kolejną podobną stroną WordPressa, lecz z projektem przygotowanym jako spójna, przemyślana całość.