Opret smukke gradientovergange med Granim.js
Webdesign er fyldt med skønhed og glædeligt interface design. Nogle funktioner er funktionelle, mens andre kun er til show. Gradient overgange er udelukkende til show men de pakker ret et slag!
Med Granim.js, du kan bygge brugerdefinerede fuldfarvegradientovergange der ser glat ud og passer fint sammen med ethvert websted.
Du kan finde en flok brugerdefinerede eksempler på hovedeksemplarsiden med mange forskellige stilarter fra enkle overgange til mere komplekse animationer ved hjælp af baggrundsbilleder.
Granim er det eneste JS bibliotek jeg kender tackling gradient overgange. Dette er et spørgsmål, jeg altid har spurgt om og aldrig rigtig fundet et godt svar. Granim er den perfekte løsning, og det er bygget på vanille JavaScript, så det kan køre sammen med jQuery eller et andet JS-bibliotek.
Lige slip den granim.js fil på din side at komme i gang. Du kan enten downloade en kopi fra GitHub eller være vært fra en live CDN.
Her er en grundlæggende kodeeksempel fra GitHub repo:
Ting kan blive meget mere kompliceret end dette, så du virkelig burde grave ind i eksemplerne at lære mere. Du finder kodeuddrag under hvert eksempel så du kan lav gradientovergange til billedbaggrunde og lige billedmasker.
Billedmaskerne kan bruges til et logo, for eksempel et PNG-billede, der bliver gemt bag en gradient. Dette giver dig mulighed for at oprette et JS-animeret logo hvor gradienten langsomt overgår i hele teksten.
Bemærk dette eksempel tager en masse af JS / CSS kode så det er ikke en simpel implementering.
Men jo mere du øve med Granim jo lettere bliver det at opsætte og tilpasse. Og da dette er den eneste sande gradient overgangsbibliotek online, er det den absolut bedste løsning til ethvert projekt.
Biblioteket opdateres stadig semi-ofte, så du kan tjekke fanebladet for mere info.
Det er et smukt lille bibliotek så der er ikke for mange ting at gå galt eller skal opdateres. Dette gør Granim.js til en pålidelig løsning til ethvert websted, der er lille eller stort.
Til download en kopi Besøg udgivelsessiden på GitHub eller tag en kopi af .js fil direkte fra cdnjs. Og til se kilden på et levende eksempel tag et kig på denne CodePen demo oprettet af Jonathan Schneider.
