Gyönyörű gradiens átmenetek létrehozása a Granim.js programmal

A web design tele van szépséggel és kellemes illesztőfelülettel. Egyes funkciók funkcionálisak, míg mások csak a show számára. Gradiens átmenetek vannak kizárólag a show számára de elég nagy ütést tesznek!

Val vel Granim.js, építhetsz egyéni színes színátmenetek átmenetei amely sima és szépen néz ki minden weboldalon.

Találhatod egy csomó egyedi példát a fő példákon a különböző stílusokból származó oldalak a bonyolultabb animációkhoz, a háttérképeket használva.

Granim az egyetlen JS könyvtár, amit tudok a gradiens átmenetek kezelése. Ez egy kérdés, amiről mindig is gondoltam, és soha nem találtam nagyszerű választ. A Granim a tökéletes megoldás, és ez az vanília JavaScript-re épül, így futhat a jQuery vagy bármely más JS könyvtár mellett.

Éppen dobja el granim.js fájlba kezdeni. Letölthet egy példányt a GitHub-ból, vagy egy élő CDN-ből.

Íme alapkódminta a GitHub repóból:

A dolgok ennél sokkal bonyolultabbak lehetnek, így tényleg meg kell ásni a példákba többet tanulni. Megtalálod kódrészletek az egyes példákban Szóval te meg tudod gradiens átmenetek létrehozása kép háttérképek és akár képmaszkok számára is.

A képmaszkokat használhatjuk egy logóhoz, például egy PNG-képhez, amely a színátmenet mögött rejtőzködik. Ezzel létrehozhat JS-animált logó ahol a színátmenet lassan átmeneti az egész szövegben.

Vegye figyelembe ezt a példát nagyon JS / CSS kódot így nem egyszerű megvalósítás.

De minél többet gyakorolsz a Granim-szal, annál könnyebb lesz beállítani és testreszabni. Ez pedig az egyetlen igazi színátmeneti átmeneti könyvtár online, és ez a legjobb megoldás minden projekt számára.

A könyvtárat félig gyakran frissítik, így további információkat találhat a problémák lapjáról.

ez egy szép kis könyvtár így nincs túl sok dolog ahhoz, hogy rosszul vagy frissítésre szoruljon. Ez teszi a Granim.js-t megbízható megoldásnak minden olyan kis- vagy nagyvállalat számára.

Nak nek töltse le a másolatot látogasson el a GitHub kiadási oldalára, vagy vegye fel a másolatát a .js fájl közvetlenül a cdnjs-ből. És megtekintheti a forrást egy élő példában vigyázzon erre a CodePen demóra, amelyet Jonathan Schneider készített.