Ívelt képsor
Egy képsor, ami az egyik szélen befordul, középen kisimul, a másikon elhalványul.
Vidd rá az egeret egy képre: a sor megáll, és kiírja a munka nevét. Kattints: megnyílik. Billentyűzettel a Tab egy linksort hoz elő.
Prémium egyedi animáció
Egyedi tervezésű és kivitelezésű, látványos elem az Ön saját tartalmára szabva (például ívelt képsor vagy üvegmappák): 3D, üveghatás, saját grafika. Több tervezési és hangolási munka, mint egy sima animáció.
80 000 Ft – 95 000 Ft
Egy sor kép halad egy henger belsején jobbról balra. A közepe síkban néz rád, a két vége feléd hajlik, és minden kép a hossza mentén ívelődik, a szélek pedig az oldal színébe halványulnak. Ráviszed az egeret, megáll, és kiírja, melyik munka az; rákattintasz, és megnyílik.
- CSS 3D
- perspective
- Container queries
Hogyan működik
A CSS doboz nem tud elhajolni, ezért minden képet 16 keskeny, függőleges szeletre vágtam, és mindegyik szelet a henger egy lapja: ugyanazt a képet mutatja, csak a henger tengelye körül a saját pár fokával elforgatva. Maga a kép egyetlen animáció: egy forgatás ugyanazon tengely körül viszi végig az íven, ezért a szeletei nem tudnak elcsúszni egymástól, és nem mutathatnak különböző képet. A mozgás csak transform, amit a videókártya számol, a szélek elhalványulása pedig egy álló maszk.
A JavaScript két apró dolgot csinál: lemérli a keretet, hogy tudja, hány képre van szüksége a körhöz, és amikor egy kép kiér a látómezőből, odaadja neki a következőt, így a lista akárhány képpel végigjátszódik. Ami nem látszik, az megáll (kiment a képernyőről, vagy csökkentett mozgást kértél). Billentyűzettel is használható: a munkák ugyanazok a linkek, egy sorban, ami Tab-bal jelenik meg.
Szeretnél ilyet a saját oldaladra?
A motion és a WebGL a munkám része. Megbeszéljük, mi férne a te oldaladba úgy, hogy közben gyors maradjon.
Árajánlatot kérek
Szerkesztő felületÍrd át az oldalad tartalmát kódolás nélkül, és azonnal látod az eredményt.