Sukurkite gražius gradiento perėjimus su „Granim.js“
Interneto dizainas yra pilnas grožio ir malonaus sąsajos dizaino. Kai kurios funkcijos yra funkcinės, o kitos - tik demonstravimui. Gradiento perėjimai yra tik šou bet jie supakuoja gana daug!
Su Granim.js, galite sukurti pasirinktinių spalvų gradientų perėjimai kad bet kokioje svetainėje atrodo sklandžiai ir gerai.
Tu gali rasti pasirinktinių pavyzdžių krūva pagrindinių pavyzdžių puslapyje yra daug įvairių stilių, nuo paprastų perėjimų prie sudėtingesnių animacijų, naudojant foninius vaizdus.
Granim yra vienintelė JS biblioteka, kurią žinau sprendžiant gradientų perėjimus. Tai klausimas, su kuriuo aš visada susidomėjau ir niekada tikrai neradau puikaus atsakymo. „Granim“ yra puikus sprendimas pastatytas ant vanilės „JavaScript“, todėl jis gali veikti kartu su jQuery arba bet kuria kita JS biblioteka.
Tiesiog nuleiskite granim.js failą į savo puslapį pradėti. Galite atsisiųsti kopiją iš „GitHub“ arba priimančiojo iš gyvo CDN.
Štai pagrindinio kodo pavyzdys iš „GitHub“ repo:
Daiktai gali tapti daug sudėtingesni už tai, kad turėtumėte įterpti į pavyzdžius sužinoti daugiau. Rasite kodo fragmentai pagal kiekvieną pavyzdį taip galite sukurti gradiento perėjimus vaizdų fonams ir netgi vaizdo kaukėms.
Vaizdo kaukes galima naudoti logotipui, pavyzdžiui, PNG vaizdui, kuris paslėptas už gradiento. Tai leidžia sukurti JS animacinis logotipas kur nuolydis lėtai pereina visą tekstą.
Atkreipkite dėmesį į šį pavyzdį daug JS / CSS kodo todėl tai nėra paprastas įgyvendinimas.
Bet kuo daugiau praktikuosite su „Granim“, tuo lengviau bus nustatyti ir pritaikyti. Ir tai yra vienintelė tikroji gradiento perėjimo biblioteka internete - tai absoliutus geriausias sprendimas bet kuriam projektui.
Biblioteka vis dar atnaujinama pusiau dažnai, todėl galite daugiau sužinoti apie skirtuką.
Tai gana maža biblioteka todėl nėra per daug dalykų, kuriuos reikia suklysti ar atnaujinti. Tai daro Granim.js patikimą sprendimą bet kuriai mažai ar dideliai vietai.
Į atsisiųskite kopiją apsilankykite „GitHub“ leidinių puslapyje arba paimkite kopiją .js failą tiesiogiai iš cdnjs. Ir peržiūrėti šaltinį gyvame pavyzdyje pažvelkite į šį „CodePen“ demonstraciją, kurią sukūrė Jonathan Schneider.
