Ustvarite lepe prelome z Granim.js
Spletno oblikovanje je polno lepote in prijetnega dizajna vmesnika. Nekatere funkcije so funkcionalne, druge pa samo za predstavo. Gradientni prehodi so samo za predstavo toda pakira se precej udarec!
S Granim.js, lahko gradite prilagojeni prehodi s polnim barvnim prelivom ki izgledajo gladko in mrežasto lepo s katero koli spletno stranjo.
Lahko najdeš kup primerov po meri na strani z glavnimi primeri s številnimi različnimi slogi, od preprostih prehodov do zahtevnejših animacij z uporabo slik ozadja.
Granim je edina JS knjižnica, ki jo poznam spopadanje z gradientnimi prehodi. To je vprašanje, o katerem sem se vedno spraševal in nikoli nisem našel dobrega odgovora. Granim je popolna rešitev in je zgrajen na vanilji JavaScript, tako da lahko deluje skupaj z jQuery ali katero koli drugo knjižnico JS.
Samo spustite granim.js v svojo stran za začetek. Lahko prenesete kopijo iz GitHub-a ali pa gostite enega iz živega CDN-ja.
Tukaj je vzorec osnovne kode iz repo GitHub:
Stvari lahko postanejo veliko bolj zapletene kot to, da bi res morali poglobite primere da bi izvedeli več. Boste našli odrezke kode za vsak primer torej lahko ustvarjanje prelivov prelivov za slikovno ozadje in celo slikovne maske.
Maske za slike lahko uporabite za logotip, na primer sliko PNG, ki se skrije za gradientom. To vam omogoča ustvarjanje JS-animirani logotip kjer je naklon počasi prehajajo v celotnem besedilu.
Upoštevajte ta primer veliko kode JS / CSS tako da ni preprosta izvedba.
Bolj ko vadite z Granimom, lažje boste nastavili in prilagodili. In s tem, da je edini pravi gradient prehod knjižnice na spletu je absolutno najboljša rešitev za vsak projekt.
Knjižnica se še vedno pogosto posodablja, tako da lahko za več informacij preverite kartico z vprašanji.
To je lepa knjižnica tako da ni preveč stvari, da gredo narobe ali potrebujejo posodobitev. To je tisto, zaradi česar je Granim.js zanesljiva rešitev za vse majhne ali velike lokacije.
Za prenesite kopijo obiščite stran za javnost na GitHubu ali si oglejte kopijo .js datoteko neposredno iz cdnjs. In do si oglejte vir na zgledu v živo pokukajte na demo CodePen, ki ga je ustvaril Jonathan Schneider.
