Laboratorium odświeżania
Na początek stara strona: wąska kolumna, tabela, menu z boku i licznik odwiedzin. Przewiń, a rozsypie się na cząstki.
Rozsypka
Każda cząstka leci osobno. Front przemiany to cięcie pochylone o 19°, takie samo jak w logo, a szczelina załamuje obraz jak szkło.
Napis z cząstek
Punkty wyliczone z kroju Archivo na 125% szerokości. Polskie znaki świecą limonką, jak w haśle na stronie głównej.
Nowa strona w warstwach
Ta sama strona rozłożona w głąb: tło, zdjęcie, karty, nagłówek i przycisk najbliżej Ciebie. Rusz kursorem albo palcem, a cząstki się rozsuną.
Znak
Na koniec znak Odświeżonej wytłoczony w przestrzeni. Ściany z bieli, cięcie z limonki.
Jak to działa
Bez bibliotek i bez silnika gier. Wszystko, co widać wyżej, liczy karta graficzna w Twojej przeglądarce.
- Czysty WebGL2. Cały pokaz to jeden plik JavaScript z sześcioma programami dla karty graficznej, ok. 12 kB po kompresji.
- Pięć kształtów w każdej cząstce. Rysuję je na niewidocznym płótnie (napis, dwie strony, znak) albo liczę wzorem (wir) i losuję punkty z pikseli. Na komputerze 140 tysięcy cząstek, na telefonie 56 tysięcy.
- Przemianę liczy karta graficzna. Procesor podaje tylko postęp przewijania. Cząstka zmienia kształt, gdy przejdzie przez nią pochylone cięcie, a w locie dostaje wir i błysk limonki.
- Światło jak w filmie. Poświata z pięciu poziomów rozmycia, mapowanie tonów, rozszczepienie barw przy brzegach i winieta. Podłoga z siatką to promień z kamery przecięty z płaszczyzną, bez ani jednego trójkąta podłogi.
- Szybko w praktyce. Scena stoi, gdy jej nie widać albo karta przeglądarki jest w tle. Na wolnej karcie graficznej sama obniża rozdzielczość. Przy ograniczonym ruchu w systemie kształty zmieniają się bez animacji, a bez WebGL2 zostaje zwykły obraz.
Pokaz, nie szablon
Taka scena waży więcej niż cała strona małej firmy i nie dostanie 90+ w PageSpeed. Dlatego zostaje tutaj. Strony firm robię lekkie, szablony nie mają ani jednego skryptu, a wynik 90+ na telefonie gwarantuję w umowie.
Jeśli chcesz zobaczyć, jak mogłaby wyglądać Twoja firma, przejrzyj przykładowe strony dla różnych branż. Inne pokazy znajdziesz w laboratorium.
Zobacz swoją nową stronę, zanim zapłacisz
Przygotuję bezpłatny podgląd na podstawie obecnej strony. Płacisz dopiero, gdy go zaakceptujesz.
Wolisz porozmawiać? Umów krótką rozmowę.