Creați tranziții cu Gradient frumos cu Granim.js

Designul web este plin de design frumos și plăcut de interfață. Unele funcții sunt funcționale, în timp ce altele sunt doar pentru spectacol. Gradient tranziții sunteți numai pentru spectacol dar se împachetează destul de mult!

Cu Granim.js, puteți construi tranziții personalizate cu gradient full color care arata neted si cu ochiuri frumoase cu orice site.

Puteți găsi o grămadă de exemple personalizate pe pagina principală a exemplelor cu multe stiluri diferite, de la tranziții simple la animații mai complexe, utilizând imagini de fundal.

Granim este singura bibliotecă JS pe care o cunosc abordarea tranzițiilor gradientului. Aceasta este o intrebare la care am intrebat mereu si nu am gasit niciodata un raspuns bun. Granim este soluția perfectă și este construit pe vanilla JavaScript, astfel încât poate rula alături de jQuery sau orice altă bibliotecă JS.

Doar abandonați granim.js fișier în pagina dvs. pentru a incepe. Puteți descărca fie o copie de la GitHub, fie una gazdă, dintr-un CDN live.

Iată un eșantion de cod de bază din repo GitHub:

Lucrurile pot deveni mult mai complicate decât asta, așa că ar trebui cu adevărat săpe în exemple pentru a afla mai multe. Vei găsi fragmente de cod în fiecare exemplar Asa ca poti a crea tranziții de gradient pentru fundaluri de imagine și chiar pentru măști de imagine.

Măștile de imagine pot fi folosite pentru un logo, de exemplu o imagine PNG, care se ascunde în spatele gradientului. Aceasta vă permite să creați un logo JS animat unde gradientul tranziții lentă în text.

Notați acest exemplu mult codului JS / CSS deci nu este o implementare simplă.

Dar, cu cât veți practica mai mult cu Granim, cu atât va fi mai ușor să configurați și să personalizați. Și cu aceasta fiind singura bibliotecă de tranziție adevărată cu gradient online, este cea mai bună soluție absolută pentru orice proiect.

Biblioteca este în continuare actualizată semi-frecvent, astfel încât să puteți verifica fila probleme pentru mai multe informații.

este o bibliotecă destul de mică astfel încât nu sunt prea multe lucruri pentru a merge prost sau nevoie de actualizare. Aceasta este ceea ce face Granim.js o soluție fiabilă pentru orice site mic sau mare.

La descărcați o copie vizitați pagina de lansări pe GitHub sau apucați o copie a lui .js fișier direct din cdnjs. Și a vizualizați sursa pe un exemplu live ia o privire la acest demo CodePen creat de Jonathan Schneider.