Lag vakre graderingsoverganger med Granim.js
Webdesign er full av skjønnhet og behagelig grensesnitt design. Noen funksjoner er funksjonelle, mens andre er bare for show. Gradientoverganger er utelukkende for show men de pakker ganske mye!
Med Granim.js, du kan bygge tilpassede fargegradientoverganger som ser jevnt ut og mesher pent med et hvilket som helst nettsted.
Du kan finne en rekke egendefinerte eksempler på hovedeksemplarsiden med mange forskjellige stilarter fra enkle overganger til mer komplekse animasjoner ved hjelp av bakgrunnsbilder.
Granim er det eneste JS-biblioteket jeg kjenner takling gradient overganger. Dette er et spørsmål jeg alltid har lurt på og aldri funnet et godt svar. Granim er den perfekte løsningen, og det er det bygget på vanilje JavaScript, så det kan kjøre sammen med jQuery eller et annet JS-bibliotek.
Bare slipp granim.js filen til siden din å komme i gang. Du kan enten laste ned en kopi fra GitHub eller hoste en fra en live CDN.
her er en grunnleggende kodeksempel fra GitHub repo:
Ting kan bli mye mer komplisert enn dette, slik at du virkelig burde grave inn i eksemplene å lære mer. Du vil finne kodebiter under hvert eksempel så du kan Lag gradientoverganger for bildebakgrunn og jevne bildemasker.
Bildemasker kan brukes til en logo, for eksempel et PNG-bilde, som blir skjult bak en gradient. Dette lar deg lage en JS-animert logo hvor gradienten Langsomt overgår gjennom hele teksten.
Merk dette eksemplet tar mye av JS / CSS kode så det er ikke en enkel implementering.
Men jo mer du trener med Granim, desto lettere blir det å sette opp og tilpasse. Og med dette er den eneste sanne gradient overgangsbiblioteket på nettet, er det den absolutte beste løsningen for ethvert prosjekt.
Biblioteket oppdateres fortsatt semi-ofte slik at du kan sjekke problemfanen for mer info.
Det er et ganske lite bibliotek så det er ikke for mange ting å gå galt eller trenger oppdatering. Dette gjør Granim.js til en pålitelig løsning for alle små og store sider.
Til last ned en kopi besøk utgivelsessiden på GitHub eller ta en kopi av .js filen direkte fra cdnjs. Og til se kilden på et levende eksempel ta en titt på denne CodePen-demoen skapt av Jonathan Schneider.
