Tusz w wodzie
Napis „Masz starą stronę?” to tusz w cieczy, którą co klatkę liczy karta graficzna. Przesuń kursorem albo palcem w bok, a zawiruje. Potem przewijaj.
Stara strona się rozpływa
Każde pole siatki ma prędkość i ciśnienie, a tusz płynie razem z nimi. To nie jest nagranie: każde wejście wygląda trochę inaczej.
Cięcie
Przez ciecz przechodzi limonkowe cięcie pochylone o 19°, jak w znaku Odświeżonej. Pcha ciecz jak wiosło i zostawia za sobą wiry. Przewiń w górę, a wróci.
Pod spodem
Tak wygląda to, czego zwykle nie widać: wirowość cieczy. Limonka i szarość to wiry kręcące w przeciwne strony. Co klatkę ciśnienie liczy się kilkanaście razy, żeby ciecz się nie ściskała.
Nowy kształt
Na koniec tusz zbiera się z powrotem, ale w nowy napis. Tak pracuję ze stronami: to, co dobre, zostaje, tylko w nowej formie.
Jak to działa
Ciecz, tusz i napisy liczy karta graficzna. Nic nie jest pobierane poza jednym skryptem.
- Ciecz na siatce. Równania Naviera-Stokesa na siatce ok. 160 pól na krótszym boku: prędkość przenoszona sama ze sobą, podtrzymanie drobnych wirów, a potem ciśnienie liczone kilkanaście razy na klatkę, żeby ciecz się nie ściskała.
- Tusz osobno. Kolor płynie w dużo gęstszej siatce niż prędkość, więc krawędzie liter i smugi zostają ostre. Światło z gradientu gęstości daje mokry połysk.
- Napisy z płótna. Oba napisy rysuję w przeglądarce krojem Archivo: stary ściśnięty i szary, nowy szeroki na limonkowym zakreśleniu. Na końcu tusz dryfuje w stronę liter po rozmytej kopii napisu.
- Szybko w praktyce. Scena stoi, gdy jej nie widać, sama obniża rozdzielczość obrazu na wolnej karcie graficznej, a przy ograniczonym ruchu pokazuje od razu napis bez cieczy.
Więcej pokazów
To jeden z kilku pokazów w laboratorium. Strony firm robię lekkie i bez takich scen, z gwarancją 90+ w PageSpeed na telefonie.
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ę.