Mo.js - Kompletna biblioteka grafike pokreta za web

Animacija na webu je tu da ostane JavaScript postaje sve moćniji i podrška za preglednik raste sa svakom godinom.

Većina animacija koje smo upoznati s fokusom na sučelje: padajući izbornici, gumbi s karticama i dijaprojekcije su uobičajeni primjeri.

Ali Mo.js je drugačiji. Ovo je JavaScript biblioteka izrađena je za prilagođene grafike pokreta kako bi dizajneri stvorili nevjerojatne animirane značajke koje nadilaze jednostavne UI / UX trikove.

Ako posjetite Mo.js početnu stranicu, pronaći ćete punu dokumentaciju zajedno s velikim tutorial za početnike.

Zabilježite ovo biblioteka je prilično teška za rad. Trebali biste biti upoznati s osnovnim kodiranjem frontend-a prije nego što sami krenete s Mo.js. Međutim, postoji mnogo toga što možete naučiti samo proučavanjem demo snimaka uživo i kopanjem u neki od izvornog koda.

Imati zaviriti u glavni GitHub repo ako želite vidjeti neke demo u akciji.

Postoji čitav popis linkova iz CodePen-a koji sadrže sve demo snimke uživo. To uključuje učitavači animacija na cijelom zaslonu, mikrointerakcije "klikni za animaciju", i tona manipulacija oblika.

Na primjer, ova olovka stvara prilično ludu mikrointerakciju s korisničkog unosa (samo kliknite bilo gdje unutar olovke da biste je vidjeli).

Neke od tih olovaka mogu se osjećati na vrhu, ali to nisu samo JS animacije. Oni su stvarno umjetnička djela.

Ovi dokazni predmeti dokazuju koliko smo daleko došli s animacijom na webu. Činjenica da svatko može stvoriti te efekte koristeći samo frontend kod je jednostavno nevjerojatan.

Ako želite vidjeti više od Mo.js, pogledajte demo na GitHubu. Možda će vam se svidjeti i ovaj tutorijal kako raditi korak po korak s knjižnicom Mo.js.

U svakom slučaju, ovo je jedna od mojih omiljenih animacijskih knjižnica do danas. Ona nudi toliko kontrole koje jednostavno ne možete pronaći nigdje drugdje. I to pomaže da se mikrointerakcije iz mobilnih aplikacija uvedu u web dizajn.