Mo.js - Kompletná knižnica Motion Graphics pre web

Animácia na webe je tu na pobyt JavaScript je stále silnejší a podpora prehliadača rastie s každým rokom.

Väčšina animácií, ktoré poznáme, sa sústreďuje na rozhranie: rozbaľovacie ponuky, tlačidlá s kartami a prezentácie sú bežnými príkladmi.

Ale Mo.js je iný. Toto je Knižnica JavaScript vytvorená pre vlastnú pohybovú grafiku pomôcť návrhárom vytvoriť úžasné animované funkcie, ktoré presahujú jednoduché triky UI / UX.

Ak navštívite domovskú stránku Mo.js, nájdete kompletnú dokumentáciu spolu s veľkým tutoriálom pre začiatočníkov.

Ber to na vedomie knižnica je docela ťažké pracovať. Mali by ste byť oboznámení so základným kódovaním frontend predtým, než začnete s Mo.js sami upravovať. Existuje však veľa, ktoré môžete vyzdvihnúť len štúdiom živých ukážok a kopaním do časti zdrojového kódu.

Pozrite sa na hlavnú repo GitHub, ak chcete vidieť nejaké demo v akcii.

Existuje celý zoznam odkazov od CodePen, ktoré obsahujú živé demo Mo.js. Tie obsahujú animátorové nakladače na celú obrazovku, animácie kliknutím na animáciu, a veľa tvarových manipulácií.

Napríklad, toto pero vytvára dosť bláznivú mikrointerakciu z užívateľského vstupu (jednoducho kliknite kdekoľvek vo vnútri pera, aby ste ju videli).

Niektoré z týchto pera sa môžu cítiť nad vrcholom, ale tieto nie sú len animácie JS. Skutočne sú to umelecké diela.

Tieto demonštrácie dokazujú ako ďaleko sme prišli s animáciou na webe. Skutočnosť, že ktokoľvek môže vytvoriť tieto efekty pomocou iba frontend kódu, je jednoducho neuveriteľný.

Ak chcete vidieť viac z Mo.js, pozrite si demo na GitHub. Môžete sa tiež páčiť tento návod, ktorý vám učí, ako postupovať s knižnicou Mo.js krok za krokom.

Či tak alebo onak, to je jedna z mojich obľúbených animačných knižníc randiť. Ponúka toľko kontroly, ktoré jednoducho nenájdete nikde inde. A pomáha prinášať mikrointerakcie z mobilných aplikácií do webového dizajnu.