Izveidojiet skaistas gradienta pārejas ar Granim.js
Web dizains ir pilns ar skaistumu un patīkamu interfeisa dizainu. Dažas funkcijas ir funkcionālas, bet citas ir tikai parādīt. Gradienta pārejas ir tikai parādīt bet tie iesaiņo diezgan perforāciju!
Ar Granim.js, jūs varat veidot pielāgotas pilnkrāsu pārejas kas izskatās gludi un tīkami ar jebkuru vietni.
Tu vari atrast virkne piemērotu piemēru galvenajos piemēros lapā ir daudz dažādu stilu, sākot no vienkāršām pārejām uz sarežģītākām animācijām, izmantojot fona attēlus.
Granim ir vienīgā JS bibliotēka, ko es zinu gradientu pāreju novēršana. Šis ir jautājums, par kuru es vienmēr esmu pārsteigts un nekad neesmu atradis lielisku atbildi. Granim ir ideāls risinājums balstīta uz vaniļas JavaScript, tā var darboties kopā ar jQuery vai jebkuru citu JS bibliotēku.
Tikai nomest granim.js failu savā lapā lai sāktu darbu. Jūs varat vai nu lejupielādēt kopiju no GitHub vai arī no tā, kas atrodas vienā no tiešraides CDN.
Lūk, šeit pamata koda paraugu no GitHub repo:
Lietas var iegūt daudz sarežģītākas, nekā jums tā vajadzētu ielieciet piemēros lai uzzinātu vairāk. Jūs atradīsiet koda fragmenti katrā piemērā tad tu vari izveidot gradienta pārejas attēla foniem un pat attēlu maskām.
Attēlu maskas var izmantot logotipam, piemēram, PNG attēlam, kas tiek paslēpts aiz slīpuma. Tas ļauj jums izveidot JS animācijas logo kur slīpums lēnām pārejas visā tekstā.
Ņemiet vērā šo piemēru daudz no JS / CSS koda tāpēc tā nav vienkārša īstenošana.
Bet jo vairāk jūs praktizējat ar Granim, jo vieglāk būs iestatīt un pielāgot. Un tā kā šī ir vienīgā patiesā gradienta pārejas bibliotēka tiešsaistē, tas ir absolūti labākais risinājums jebkuram projektam.
Bibliotēka joprojām tiek atjaunināta daļēji bieži, lai jūs varētu pārbaudīt problēmu cilni, lai iegūtu vairāk informācijas.
Tas ir diezgan maza bibliotēka tāpēc nav pārāk daudz lietu, kas nepareizi vai jāatjaunina. Tas padara Granim.js par uzticamu risinājumu jebkurai mazai vai lielai vietnei.
Uz lejupielādējiet kopiju Apmeklējiet GitHub izlaidumu lapu vai paņemiet tā kopiju .js failu tieši no cdnjs. Un skatīt avotu tiešraidē apskatiet šo CodePen demo, ko izveidojis Jonathan Schneider.
