Napravite lijepe gradijentne prijelaze s Granim.js
Web dizajn je prepun ljepote i ugodnog sučelja. Neke značajke su funkcionalne, dok su druge samo za predstavu. Gradijentni prijelazi su isključivo za show ali spakiraju dosta!
S Granim.js, možete graditi prilagođeni prijelazi u punom koloru koji izgledaju glatko i lijepo s bilo kojom web stranicom.
Možeš naći hrpa prilagođenih primjera na glavnim primjerima stranica s mnogo različitih stilova od jednostavnih prijelaza do složenijih animacija pomoću pozadinskih slika.
Granim je jedina JS knjižnica koju znam rješavanje gradijentnih prijelaza. To je pitanje o kojem sam se uvijek pitao i nikad nisam našao dobar odgovor. Granim je savršeno rješenje i to je izgrađen na JavaScriptu s vanilijom, tako da se može izvoditi uz jQuery ili bilo koju drugu JS knjižnicu.
Samo ispustite granim.js datoteku na svoju stranicu započeti. Možete preuzeti kopiju iz GitHub-a ili hostirati jednu iz live CDN-a.
Evo uzorak osnovnog koda iz repozitorija GitHub:
Stvari mogu postati mnogo složenije od ovoga, tako da stvarno trebate upišite primjere naučiti više. Naći ćete isječke koda ispod svakog primjera tako da možete stvoriti prijelaze gradijenta za pozadinske slike, pa čak i za maske slika.
Maske slika mogu se koristiti za logotip, primjerice PNG sliku koja se skriva iza gradijenta. To vam omogućuje stvaranje JS-animirani logotip gdje gradijent polagani prijelazi u cijelom tekstu.
Uzmite u obzir ovaj primjer puno JS / CSS koda tako da nije jednostavna implementacija.
Ali što više vježbate s Granimom, lakše ćete ga postaviti i prilagoditi. A s tim da je to jedini pravi gradijent prijelaza knjižnice na internetu to je apsolutno najbolje rješenje za bilo koji projekt.
Knjižnica se i dalje ažurira polu-često, tako da možete provjeriti karticu problema za više informacija.
to je prilično mala knjižnica tako da nema previše stvari koje bi krenule naopako ili vam je potrebno ažuriranje. To je ono što Granim.js čini pouzdanim rješenjem za svako malo ili veliko mjesto.
Do preuzmite kopiju posjetite stranicu s izdanjima na GitHubu ili uzmite kopiju .js datoteku izravno iz cdnjs. I za pogledajte izvor na primjeru uživo zavirite u ovaj CodePen demo koji je izradio Jonathan Schneider.
