Cześć, tu Kuba.

Dzisiaj pokażę Wam fajny ficzer JavaScriptowy do WordPressa.

Zaczęło się niewinnie: od pomysłu na zamarzającą stronę lodowiska.

Potem przyszły skaczące literki.

Potem Soczewka Prawdy.

I czasami naprawdę myślę, że powinienem nauczyć się mówić: stop. 🙂

A gdyby strona internetowa mogła zamarznąć?

Wszystko zaczęło się od lodowiska w Hit2Fit.

Chcieliśmy zrobić coś nietypowego. Coś, co sprawi, że strona nie będzie tylko kolejnym miejscem, gdzie można sprawdzić godziny otwarcia i kupić bilet.

Pojawił się pomysł:

a gdyby strona lodowiska dosłownie zamarzała?

Wyobraźcie sobie, że normalnie przewijacie stronę. Czytacie informacje. Oglądacie zdjęcia.

Wszystko działa jak zawsze.

Ale kiedy zatrzymujecie scroll i zostawiacie myszkę nieruchomo, ekran powoli zaczyna pokrywać się szronem.

Najpierw kilka kryształków.

Potem kolejne.

Aż w końcu cała strona wygląda, jakby naprawdę skuł ją mróz.

Poruszacie myszką — efekt znika.

Proste?

W pomyśle: bardzo.

W realizacji: już trochę mniej.

Taki efekt wymaga zabawy z animacją, wydajnością i sposobem reagowania strony na zachowanie użytkownika.

Szczególnie jeśli chcemy, żeby wszystko działało płynnie, nie przeszkadzało w korzystaniu ze strony i miało sens również na urządzeniach dotykowych.

Ale właśnie takie rzeczy lubię.

I oczywiście natychmiast zacząłem się zastanawiać:

co jeszcze można zrobić?

A gdyby literki skakały na trampolinach?

Skoro strona lodowiska może zamarzać, to dlaczego strona parku trampolin nie miałaby… skakać?

Dosłownie.

Wyobraźcie sobie nagłówek, w którym poszczególne litery reagują na ruch kursora.

Odbijają się.

Podskakują.

Może nawet delikatnie zderzają się ze sobą.

Trochę fizyki.

Trochę JavaScriptu.

Odrobina szaleństwa.

Nie chodzi oczywiście o to, żeby użytkownik po trzech sekundach dostał oczopląsu.

Chodzi o wykorzystanie charakteru miejsca do stworzenia doświadczenia, którego nie da się osiągnąć przez kolejne zdjęcie i przycisk:

„Kup bilet”.

Lodowisko może zamarzać.

Trampoliny mogą wprawiać tekst w ruch.

A pozostałe atrakcje?

No właśnie.

Laser tag i druga rzeczywistość

Co dobrze wygląda wizualnie?

Laser tag.

Neony.

Graffiti.

Ciemne ściany.

Kolory.

Chwila burzy mózgów w jednoosobowym dziale R&D i pojawia się kolejny pomysł:

a gdyby zrobić soczewkę, która zmienia to, co widzimy na stronie?

Nie zwykłą lupę.

Coś, co pokazuje drugą rzeczywistość.

Patrzycie na stronę i wszystko wygląda normalnie.

Teksty.

Kolory.

Grafiki.

Ale kiedy przesuwacie po niej specjalną soczewkę, zawartość pod kursorem zaczyna się zmieniać.

Tekst może ujawnić zupełnie inne znaczenie.

Kolory mogą odwrócić się jak w fotograficznym negatywie.

Pod zwykłą grafiką może pojawić się ukryte graffiti.

Tak powstał pierwszy eksperyment z Soczewką Prawdy.

Autorski moduł oparty na HTML, CSS i JavaScripcie, pozwalający odsłaniać alternatywną warstwę strony za pomocą poruszającej się po ekranie soczewki.

Mały nerdowski przypis:

największym problemem nie był sam efekt.

Największym problemem była płynność ruchu soczewki. 😀

I wtedy pojawiło się kolejne pytanie:

po co robić to tylko raz?

Jedna wtyczka, wiele możliwości

Im więcej pojawiało się pomysłów, tym bardziej oczywiste stawało się jedno.

Nie ma sensu budować każdego rozwiązania od początku.

Znacznie ciekawsze jest stworzenie wspólnego mechanizmu, który będzie można rozwijać i wykorzystywać w kolejnych projektach.

Docelowo chciałem zamknąć wszystko w jednej wtyczce WordPress.

Jednym silniku, który może obsługiwać różne efekty na różnych stronach.

W jednym miejscu soczewka zmienia tekst.

W innym odsłania alternatywne zdjęcie.

Jeszcze gdzie indziej odwraca kolory albo pokazuje ukrytą grafikę.

A kolejne moduły mogą odpowiadać za inne interakcje:

zamrażanie strony,

animowanie liter,

graffiti,

efekty zależne od kursora albo scrolla.

Jeden silnik. Wiele różnych światów.

Brzmi jak plan na przyszłość?

Żart.

Wtyczka już jest gotowa.

Bo naprawdę szkoda czasu na kodowanie drugi raz tego samego. 😀

Na razie działa w niej Soczewka Prawdy.

Ale silnik już się grzeje.

Nie wszystko będzie równie łatwe

Część pomysłów będzie oczywiście wymagała znacznie więcej pracy.

Najbardziej efekt stopniowego zamarzania strony.

Tutaj trzeba jeszcze sprawdzić:

wydajność,

płynność animacji,

zachowanie na różnych urządzeniach,

mobile,

dotyk,

i oczywiście moment, w którym przeglądarka stwierdzi:

„Kuba, może wystarczy.”

Będę eksperymentował.

Testował.

Poprawiał.

Prawdopodobnie kilka razy przeklinał.

Czyli standardowy proces tworzenia oprogramowania. 🙂

Bo strona internetowa nie musi być tylko stroną internetową

Może zamarzać.

Może podskakiwać.

Może odsłaniać ukryte graffiti.

Może pokazywać alternatywną rzeczywistość.

Zaczęliśmy od jednego pomysłu na stronę lodowiska.

Potem pojawiły się następne.

A teraz buduję technologię, dzięki której kolejne takie rzeczy będzie można robić bez wymyślania całego mechanizmu od początku.

W Saku Media bardzo lubię takie eksperymenty.

Szczególnie wtedy, kiedy jeden mały pomysł zaczyna produkować pięć następnych.

Bo czasami wystarczy chcieć zamrozić jedną stronę internetową, żeby przypadkiem zacząć budować własny silnik efektów do WordPressa.

I chyba właśnie za to najbardziej lubię tę robotę. 😎