Felmérés
Kinek szól, mit kell elérnie, és mi az a mondat, amit az oldal elhagyása után is meg kell jegyezni.
Repertoár
Amit egy felületen tényleg meg lehet csinálni
Öt élő demó. Mindegyik ebben az ablakban fut, egyik sem felvétel. Ami mozog, azt a géped számolja ki, és meg lehet fogni.
01 · Anyag
Üveg, ami tényleg szétbontja a fényt
A legtöbb webes üveghatás csak elmosás egy kép fölött. Ez valódi törés. A kristály mögött álló rácsot a felülete hajlítja el, a fehér él pedig színekre esik szét, mert a különböző hullámhosszak máshogy törnek meg. Ez a diszperzió.
A jelenethez WebGL kell. Ha nem indul el, a böngésző hardveres gyorsítása van kikapcsolva.
2.20
Húzd nullára, és visszakapsz egy közönséges üveget. Ezt a tulajdonságot a three.js a 163-as kiadás óta ismeri, korábban csak shaderrel lehetett közelíteni.
02 · Mozgás
A görgetés lesz a lejátszófej
A szekció megáll a képernyőn, és onnantól nem az oldal halad, hanem a jelenet. A görgetés nem indít el egy animációt, hanem közvetlenül vezeti. Vissza is lehet tekerni.
01
03 · Átmenet
Egy elem átköltözik, nem eltűnik
Kattints egy csempére. Nem egy másik elem nyílik ki helyette, hanem ugyanaz a doboz kúszik át az új helyére és méretére. A böngésző megméri a régi és az új állapotot, a köztes utat pedig kiszámolja.
Kattintás a csempére
04 · Szöveg
A szöveg soronként és szavanként mozog
A bekezdés sorokra és szavakra bomlik, majd visszaáll, ha átméretezed az ablakot vagy betölt a webfont. A képernyőolvasó közben az eredeti mondatot kapja, nem a feldarabolt elemeket.
Nem a betű mérete dönti el, hogy komolyan veszik-e egy oldal mondanivalóját.
A szavak itt a görgetés ütemében kapnak teljes kontrasztot. Nem dekoráció, hanem olvasásvezetés. A szem tudja, hol tart, és a bekezdés végére ugyanott ér, ahol a tartalom is lezárul.
05 · Fizika
Dobd el, és magától áll meg a helyén
A sáv megjegyzi, milyen gyorsan engedted el, lassul, mint egy valódi tárgy, és a végén a legközelebbi kártyára ül rá. Trackpadről vízszintes söprés is viszi.
Húzd el
Második rész
Ami a főoldalon is fut
Az eddigiek új eszközök. Ami most jön, az évek óta a stúdió kézjegye, és a főoldal is ezekből áll. Itt leírással együtt látod, mi dolgozik bennük.
06 · Valós idejű 3D
A földgömb megkeresi, honnan érkeztél
Nem kép és nem videó. Hatvannyolcezer pontból épül fel, a szárazföld sötétebb, az óceán halványabb. Az IP-címedből megállapítja az országot, kirajzolja a határát izzó pontokkal, odafordul, és ott megáll.
A helymeghatározás három ingyenes szolgáltatáson megy sorban, kulcs nélkül, és csak az ország szintjéig. Az adatkezelési tájékoztatóban is szerepel. A ?geo=HU paraméterrel bármelyik ország kényszeríthető, ez a bemutatókhoz készült. Mobilon huszonnégyezer pont fut, hogy az akkumulátort ne terhelje.
07 · Fény
Egy mondat, amit a fény mutat meg
A panel sötéten vár, és amikor a nézőbe ér, egy fénysáv söpör végig rajta. Minden belépéskor újrajátszik, tehát ha visszagörgetsz és újra lejössz, megint látod. Rejtett fülön és csökkentett mozgásnál a felirat alapból világos marad.
Az első benyomásra nincs második esély.
08 · Felület
Betűtest és üveg, közelről
Balra a betű. A két csúszka a méretet és a betűközt állítja, és látszik, hogy nagy méretben szorosabb betűköz kell, különben szétesik a szó. Jobbra az üveg, ami a mutató felé dől, és a fény-él vele együtt mozdul.
Studio
Anyagszerű üveg
Valós backdrop blur, belső fény-él, sűrű grain. Az üveg tapintható, nem festett.
Az üveg nem festett átlátszóság. Valódi háttérelmosás, belső fény-él és szemcse adja, ezért viselkedik anyagként, amikor mögötte mozog a tartalom.
Ezek nem effektek, hanem eszközök
Mindegyik azért került ide, mert egy valódi oldalon dolgozik. A diszperzió egy termékbemutatónak ad anyagot, a görgetésvezérelt jelenet egy folyamatot magyaráz el, a földgömb pedig azonnal megmutatja, hogy a felület tud valamit a látogatóról. A kész mintaoldalakat a főoldalon lehet végignézni.