Skapa Beautiful Gradient Transitions med Granim.js
Webbdesign är full av skönhet och tilltalande gränssnittsdesign. Vissa funktioner är funktionella medan andra bara är för show. Gradientövergångar är enbart för show men de packar ganska bra!
Med Granim.js, du kan bygga anpassade fullfärgsgradientövergångar som ser jätte ut och mäter snyggt med vilken webbplats som helst.
Du kan hitta en massa anpassade exempel På huvudexemplarsidan med många olika stilar från enkla övergångar till mer komplexa animationer med bakgrundsbilder.
Granim är det enda JS-biblioteket jag vet tacklande övergångsövergångar. Det här är en fråga som jag alltid undrat om och aldrig hittade ett bra svar. Granim är den perfekta lösningen och det är byggd på vanilj JavaScript, så det kan springa vid sidan av jQuery eller något annat JS-bibliotek.
Bara släpp granim.js filen till din sida för att starta. Du kan antingen hämta en kopia från GitHub eller värd en från en live CDN.
här är ett grundläggande kodprov från GitHub repo:
Saker kan bli mycket mer komplicerade än detta så du borde verkligen gräva i exemplen att lära sig mer. Hittar du kodavsnitt under varje exempel så du kan skapa gradientövergångar för bildbakgrund och jämn bildmask.
Bildmaskerna kan användas för en logotyp, till exempel en PNG-bild som blir dold bakom en gradient. Det här låter dig skapa en JS-animerad logotyp var gradienten övergår långsamt genom hela texten.
Observera detta exempel tar mycket av JS / CSS-kod så det är inte en enkel implementering.
Men ju mer du övar med Granim desto lättare blir det att installera och anpassa. Och med detta är det enda sanna gradientövergångsbiblioteket på nätet, det är den absolut bästa lösningen för något projekt.
Biblioteket uppdateras fortfarande halv ofta så att du kan kolla fliken Utfärdar för mer info.
Dess ett ganska litet bibliotek så det finns inte så många saker att gå fel eller behöver uppdateras. Det här gör Granim.js till en pålitlig lösning för alla små och stora webbplatser.
Till ladda ner en kopia Besök utgivningssidan på GitHub eller ta en kopia av .js filen direkt från cdnjs. Och till visa källan på ett liveexempel ta en titt på denna CodePen-demo skapad av Jonathan Schneider.
