Vytvorte prekrásne gradientové prechody s Granim.js
Web dizajn je plný krásy a príjemného dizajnu rozhrania. Niektoré funkcie sú funkčné, zatiaľ čo iné sú určené len na prehliadku. Gradientové prechody sú výhradne na prehliadku ale zabalili docela úder!
s Granim.js, môžete stavať vlastné plnofarebné gradientové prechody ktoré vyzerajú hladko a dobre vkusne s akoukoľvek webovou stránkou.
Môžeš nájsť veľa vlastných príkladov na hlavnej stránke príkladov s mnohými rôznymi štýlmi od jednoduchých prechodov k zložitejším animáciám pomocou obrázkov pozadia.
Granim je jediná JS knižnica, ktorú poznám riešenie prechodov gradientu. Je to otázka, o ktorej som vždy premýšľal a nikdy som naozaj našiel skvelú odpoveď. Granim je perfektné riešenie a je to postavený na javisku JavaScript, takže môže bežať pozdĺž jQuery alebo akejkoľvek inej JS knižnice.
proste opustiť granim.js súbor na vašu stránku začať. Môžete buď stiahnuť kópiu z GitHub alebo hostiteľa z živého CDN.
tady základná vzorka kódu z repo GitHub:
Veci môžu byť omnoho komplikovanejšie než to, takže by ste sa naozaj mali kopírujte do príkladov naučiť sa viac. Nájdete to útržky kódu v každom príklade Takže môžeš vytvoriť gradientové prechody pre pozadia obrázkov a dokonca aj pre masky s obrázkami.
Obrazové masky môžu byť použité pre logo, napríklad obrázok PNG, ktorý sa skrýva za sklonom. To vám umožní vytvoriť animované logo JS kde je gradient pomaly prechádza textom.
Všimnite si tento príklad veľa kódu JS / CSS takže to nie je jednoduchá implementácia.
Ale čím viac sa s Granim cvičíte, tým ľahšie bude nastavenie a prispôsobenie. A s tým, že je to jediný online gradient prechodovej knižnice online, je to absolútne najlepšie riešenie pre každý projekt.
Knižnica je stále aktualizovaná polhodinou, takže môžete skontrolovať kartu problémov pre viac informácií.
to je dosť malú knižnicu takže nie je príliš veľa vecí na pokazenie alebo potrebu aktualizácie. To je to, čo robí Granim.js spoľahlivým riešením pre všetky malé alebo veľké stránky.
na stiahnuť kópiu navštívte stránku s uvoľnenými informáciami o GitHub alebo uchopte kópiu .js súbor priamo z cdnjs. A na zobrazte zdroj na živom príklade pozrite sa na toto demo programu CodePen, ktoré vytvoril Jonathan Schneider.
