Accentsconagua
Share
GitHub este un loc minunat pentru a găsi proiecte care sunt distribuite gratuit publicului, dar ați jucat vreodată un repo doar pentru a uita cât de răcoros și util ar putea fi? În acest articol voi scoate la lumină câteva proiecte fantastice disponibile pe GItHub care au un accent puternic pe ajutor animatorii clădire mișcare pentru web.
Rellax este o bibliotecă netedă, foarte ușoară, paralaxă, care funcționează și pe diferite dispozitive. Fără să scrieți tone de cod, puteți învăța cum să faceți o experiență de derulare ușoară pentru proiectul dvs. și să înțelegeți pe deplin insultele și dezavantajele a ceea ce face paralaxul ceea ce este.
Dacă vă aflați în crearea unei mișcări bazate pe fizică, mai degrabă asemănătoare cu viața, pentru munca dvs. nu arăta mai departe decât dynamics.js.
Cu aceasta, puteți anima proprietățile CSS ale oricărui element DOM, proprietăți SVG și obiecte JavaScript. Nu numai că această bibliotecă va testa experiența dvs. JS, dar veți afla, de asemenea, cum fizica face pentru o experiență mai intuitivă și mai vie pentru utilizatori.
Glisoarele de pe pagina de pornire vă ajută într-adevăr să înțelegeți cum funcționează fiecare proprietate împreună cu colegii săi pentru a crea mișcări bazate pe fizică care reflectă mișcările noastre reale.
Creați tranziții uimitoare, fluide și netede între paginile site-ului dvs. Barba.js este o bibliotecă mică (4kb minimalizată și gzipată), flexibilă și fără dependență, care vă ajută să luați UX-ul site-ului web la nivelul următor.
Este, de asemenea, o lecție în modul în care PJAX (push state AJAX) și Push State API pot fi utilizate pentru a îmbunătăți tranzițiile paginii. Dacă nu ați auzit niciodată de aceste tehnologii, este o introducere excelentă pentru ei, care, în cele din urmă, are ca rezultat un efect foarte slick pentru traversarea paginilor.
Bacsis: aruncați o privire la acest tutorial pentru mai multe despre Push State:
Wick este instrumentul de creație multimedia gratuit și cu sursă deschisă de internet. Este un mediu de animație și codificare hibrid bazat pe browser pentru realizarea interactivității pentru web. Inspirat puternic de instrumente cum ar fi Flash (animații bazate pe cadre cheie, cineva?), HyperCard și Scratch, a fost dezvoltat ca răspuns la o nevoie tot mai mare pentru un astfel de instrument cu web-ul modern.
Creați o mișcare ușoară utilizând browserul ca ghid, fără a descărca niciun software suplimentar pentru a-și face treaba.
Creați minunate animații CSS3 alimentate în cel mai scurt timp. Instrumentul de pe bouncejs.com vă permite să generați cadre cheie statice care pot fi utilizate fără nici un JavaScript suplimentar, dar dacă doriți ca aplicația dvs. să le genereze în zbor, puteți utiliza biblioteca Bounce.js.
Ieșirea keyframe-ului este cu siguranță interesantă și înțelegătoare în utilizarea funcției CSS și a matricei () CSS. Acesta este un instrument excelent pentru a regla într-adevăr o mișcare specifică și pentru a înțelege modul în care cadrele cheie pot fi folosite pentru a crea mișcări uluitoare. Există, de asemenea, un mare articol Mediu, scris de creatorul său, Joel Besada, privind reducerea numărului de cadre cheie generate, de ce este un lucru în valoare de care să ne străduim și de un fascinant aspect al relaxării.
Notă: în momentul de față Bounce nu mai este în curs de dezvoltare activă, fără planuri de dezvoltare viitoare în conformitate cu Joel.
Anime este o bibliotecă ușoară de animație JavaScript. Funcționează cu orice proprietăți CSS, transformări individuale CSS, atribute SVG sau orice alte atribute DOM și obiecte JavaScript.
Aceasta este o bibliotecă minunată pentru înțelegerea modului de a construi și a afla despre mișcările bazate pe cronologie, pornirea animațiilor la anumite valori, animațiile complexe ale cadrelor cheie, definirea timpilor de pornire față de durata anterioară a animațiilor, construirea controalelor redării și a mult mai mult.
Îți sugerez foarte mult să-i dai o șansă și dacă dorești și mai mult, există și multe demo-uri pe CodePen.
Imi place asta. Aștepta! Animate oferă o modalitate ușoară de a calcula procentele cadrelor cheie, astfel încât să puteți introduce o întârziere între fiecare iterație de animație.
Există un instrument de configurare pentru a adăuga așteptări la propriile animații, fără a fi nevoie de JavaScript, deoarece CSS nu oferă o modalitate ușoară de a întrerupe o animație înainte de a fi bifată din nou; animație întârziere indică o întârziere la începutul animației.
Puteți personaliza chiar și timpul, durata și direcția de mișcare, pentru a regla mișcarea dorită. Acesta este un mod foarte distractiv de a afla despre mișcare și vă oferă feedback despre setările dvs. în timp real.
MoJS este o "curea pentru instrumente grafice pentru web". Vă permite să creați animații și efecte netede pentru o experiență uimitoare a utilizatorului. Există chiar și o opțiune pentru a crea o construcție personalizată pentru nevoile actuale ale proiectului dvs. atât de mult timp de dimensiuni mari de fișiere!
Există o mulțime de demo-uri pentru a se scufunda și a fi listate pe GitHub. Învățați să creați câteva efecte de mișcare cu adevărat captivante, cum ar fi preferatul meu "Bubble Layout", dezvăluirea cuvintelor, trasee de praf și alte efecte cum ar fi "spargerea", plus multe altele. Dacă vrei să înveți cum să creezi efecte complicate și complicate, nu te mai gândi, pentru că MJS are spatele.
O altă fantomă ... Spiritul este un instrument excelent de animație pentru web (aplicația poate fi găsită aici); săriți și animați obiecte utilizând o cronologie vizuală. Știu că aceasta va fi minunată!
Spiritul va schimba modul în care creați animații pentru web. Vi se oferă un control complet al cronologiei, capacitatea de a inspecta animațiile și un API ușor de înțeles și de înțeles. Este o modalitate intuitivă și simplă de a înțelege animațiile clădirilor, fără costurile mari de învățare a software-ului complicat.
ScrollReveal vă oferă animații de derulare ușoară pentru web. Și ușoarele sale; în afară de a avea dependențe zero, biblioteca este 3.3KB minified și Gzipped.
Bucurați-vă de picioarele umede cu animații de secvență bazate pe intervale care pot fi configurate să se încarce în mod asincron. De asemenea, ScrollReveal acceptă rotația 3D din cutie, ceea ce înseamnă că puteți să vă învățați 3D și să vă creați într-adevăr creativ fără a trebui să grocati funcțiile de derulare și mecanică.
Aveți mai multe repo-uri cu surse deschise pe care le-am pierdut? Ați folosit vreunul dintre proiectele listate pentru acest articol? Lasă un comentariu și link-ul de mai jos! Sper că cel puțin unul dintre aceste exemple poate fi util în munca ta zilnică. Codificare fericită!
