Sklep internetowy
Strona inwestycji deweloperskiej
Strona kampanii promocyjnej
Immersyjna strona
Strona restauracji
Strona gabinetu dentystycznego
Case study
Ody Sey Van. Strona, którą ogląda się jak film.
Warsztat zabudów kamperów na bazie VW Transporter i Fiat Ducato. Zamiast galerii zdjęć: przewijanie odtwarza drogę od pustej blachy po vana nad chmurami.
Zobacz stronę na żywoPrzewiń w dół. Poniżej ta sama scena: 900 klatek i paralaksa z pięciu warstw.
Każdy projekt zaczyna się od pustej przestrzeni.
Oglądamy auto, słuchamy, jak podróżujesz, i dopiero wtedy rysujemy układ.
Izolacja i instalacje.
Wygłuszenie, izolacja termiczna i elektryka prowadzona tak, żeby służyła latami.
Meble na wymiar.
Drewniane blaty i skórzane uchwyty. Każdy front dopasowany co do milimetra.
Gotowy do drogi.
Wschód słońca nad chmurami, bez szukania kempingu i gniazdka.
Punkt wyjścia
Zabudowa kampera to miesiące pracy i dziesiątki etapów, których nie widać na zdjęciu gotowego auta. Zwykła galeria nie oddawała tego, co w tej pracy najważniejsze: rzemiosła i drogi od pustej blachy do domu na kołach.
Cel
Strona, którą się zapamiętuje, i jednocześnie strona, która działa: szybka na telefonie, dobrze oceniana przez Google i prowadząca do jednej rozmowy o konkretnym vanie.
Efekt filmowy, a w Lighthouse prawie same setki.
Pomiar wersji produkcyjnej. Największy element strony ładuje się w 2,0 s na telefonie i 0,5 s na komputerze, a układ nie przesuwa się w trakcie ładowania (CLS 0).
Dlaczego ta strona jest szybka, choć wygląda jak film.
Klatki zamiast sceny 3D
Film rozbity na pojedyncze klatki WebP i rysowany na canvasie. Pozycja przewinięcia wybiera klatkę: w dół odtwarzasz, w górę cofasz. Jakość prawdziwego materiału, bez ciężkiego silnika 3D.
Dwa zestawy klatek
Na komputer 1600×900, na telefon środkowe 70% kadru w mniejszej rozdzielczości. Zestaw zmienia się przy obrocie ekranu, bez czarnych pasów i przeskoków.
Ładowanie od zgrubnych do pełnych
Najpierw pierwsza klatka jako zwykły obraz, potem co 32., 16., 8., aż do pełnej gęstości 900 klatek. Tam, gdzie ktoś zwalnia i patrzy, klatki dociągają się w pierwszej kolejności.
Panel 15° i paralaksa
Skośny panel z zaletami wjeżdża nad film i odsłania wnętrze. Ostatni kadr przechodzi w identyczny obraz złożony z 5 warstw, które rozjeżdżają się w różnym tempie.
Bez frameworka
Czysty HTML, CSS i JavaScript. Jedyna biblioteka to Lenis do płynnego przewijania. Fonty hostowane lokalnie, bez łączenia z Google Fonts, co pomaga przy RODO i szybkości.
Formularz i zgody
Formularz z walidacją, honeypotem i Cloudflare Turnstile. Baner zgód z Google Consent Mode v2 i anonimowym rejestrem zgód.
78 realizacji w galerii z kategoriami i filmami.
Zdjęcia i filmy klient dodaje sam, w prostym edytorze uruchamianym jednym kliknięciem.
