Luo kauniita gradienttisiirtymiä Granim.js n kanssa
Web-suunnittelu on täynnä kauneutta ja miellyttävää käyttöliittymäsuunnittelua. Jotkin toiminnot ovat toiminnallisia, kun taas toiset ovat vain näyttelyyn. Gradientin siirtymät olemme vain näyttelyyn mutta he pakastavat melkoisen!
Kanssa Granim.js, voit rakentaa mukautetut täyden värin gradientin siirtymät jotka näyttävät sujuvilta ja verkottuvat hienosti minkä tahansa sivuston kanssa.
Voit löytää joukko mukautettuja esimerkkejä pääesimerkkien sivulla on monia eri tyylejä, jotka johtuvat yksinkertaisista siirtymistä monimutkaisempiin animaatioihin taustakuvia käyttäen.
Granim on ainoa JS-kirjasto, jonka tiedän gradientin siirtymien torjunta. Tämä on kysymys, josta olen aina miettinyt ja koskaan löytänyt todella hyvää vastausta. Granim on täydellinen ratkaisu rakennettu vanilja JavaScript, joten se voi toimia jQueryn tai muun JS-kirjaston rinnalla.
Vain pudota granim.js tiedosto sivulle aloittaa. Voit joko ladata kopion GitHubista tai isäntäkoneelta live-CDN: ltä.
tässä peruskoodinäyte GitHub-reposta:
Asiat voivat saada paljon monimutkaisempia kuin tämä, joten sinun pitäisi todella kaivaa esimerkkeihin oppia lisää. Tulet löytämään koodinpätkät kunkin esimerkin alla niin sinä voit luo kaltevuuden siirtymiä kuvan taustakuville ja jopa kuva-naamioille.
Kuvan maskeja voidaan käyttää logoon, esimerkiksi PNG-kuvaan, joka piiloutuu kaltevuuden taakse. Tämän avulla voit luoda JS-animoitu logo missä kaltevuus siirtyy hitaasti koko tekstissä.
Huomaa tämä esimerkki paljon JS / CSS-koodin joten se ei ole yksinkertainen toteutus.
Mutta mitä enemmän käytät Granimin kanssa, sitä helpompi on määrittää ja muokata. Ja tämä on ainoa todellinen gradientin siirtokirjasto verkossa se on ehdoton paras ratkaisu mihin tahansa projektiin.
Kirjasto päivitetään edelleen puoliksi usein, joten voit tarkistaa ongelmat-välilehden.
Sen melko pieni kirjasto joten ei ole liian monta asiaa mennä pieleen tai tarvitset päivitystä. Näin Granim.js on luotettava ratkaisu pienille tai pienille sivuille.
jotta ladata kopion Käy GitHubin julkaisujen sivulla tai ota kopio .js tiedosto suoraan cdnjsistä. Ja katsella lähdettä live-esimerkissä tutustu Jonathan Schneiderin luomaan CodePen-demoon.
