Loo Granim.js'iga ilusad gradient-siirded
Veebidisain on täis ilu ja meeldivat liidese disaini. Mõned funktsioonid on funktsionaalsed, teised aga ainult näitamiseks. Gradienti üleminekud on ainult näitamiseks kuid nad pakuvad üsna punchi!
Koos Granim.js, saate ehitada kohandatud värvi gradientide üleminekud mis näevad siledad ja silma kenasti iga veebisaidiga.
Leiad hulk kohandatud näiteid peamiste näidete lehel on palju erinevaid stiile alates lihtsatest üleminekutest keerukamatele animatsioonidele taustapilte kasutades.
Granim on ainus JS raamatukogu, mida ma tean gradientide üleminekutega tegelemine. See on küsimus, millest olen alati mõelnud ja ei leidnud kunagi suurt vastust. Granim on ideaalne lahendus ehitatud vanilla JavaScript, nii saab see töötada koos jQuery või mõne muu JS raamatukogu kõrval.
Lihtsalt langetage granim.js fail oma lehele alustada. Võite alla laadida koopia GitHubilt või hostilt otse CDN-lt.
Siin on põhikoodi proov alates GitHub repost:
Asjad võivad sellest palju keerulisem olla, nii et sa tõesti peaksid kaevama näidetesse rohkem teada saada. Leiad koodipilte iga näite all nii et saate luua gradiendi üleminekud piltide taustade ja isegi kujutise maskide jaoks.
Pildimaske saab kasutada logo, näiteks PNG-pildi jaoks, mis peitub gradiendi taha. See võimaldab teil luua JS-animeeritud logo kus gradient aeglaselt kogu tekstis.
Pange tähele seda näidet palju JS / CSS koodi nii et see ei ole lihtne rakendamine.
Aga mida rohkem te Granimiga harjutate, seda lihtsam on seadistada ja kohandada. Ja see on ainus tõeline gradientide ülemineku raamatukogu, mis on absoluutne parim lahendus mis tahes projektile.
Raamatukogu värskendatakse pooleldi sageli, et saaksite lisateabe saamiseks kontrollida vahekaarti.
See on päris väike raamatukogu nii et pole liiga palju asju, mida valesti minna või mida on vaja uuendada. See teeb Granim.js-ile usaldusväärse lahenduse iga väikese või suure ala jaoks.
Et koopia allalaadimine külastage GitHubi väljalaske lehekülge või haarake selle koopia .js faili otse cdnjs'ist. Ja vaadake allikat live näites vaadake seda CodePen demot, mille on loonud Jonathan Schneider.
