Създайте красиви градиентни преходи с Granim.js

Уеб дизайнът е пълен с красота и приятен интерфейс. Някои функции са функционални, докато други са само за шоу. Градиентни преходи сте само за шоу но те са доста удари!

с Granim.js, можете да изградите персонализирани пълноцветни градиентни преходи които изглеждат гладко и окото добре с всеки уебсайт.

Можете да намерите куп персонализирани примери на главните примери страница с много различни стилове от прости преходи към по-сложни анимации, използвайки фонови изображения.

Granim е единствената JS библиотека, която познавам преодоляване на градиентни преходи. Това е въпрос, за който винаги съм се чудил и никога не съм намерил чудесен отговор. Граним е идеалното решение и то е построен върху ванилия JavaScript, така че може да работи заедно с jQuery или друга библиотека на JS.

Просто изпуснете granim.js файл във вашата страница за да започнете. Можете да изтеглите копие от GitHub или да го направите от живо CDN.

Ето извадка с основен код от репо GitHub:

Нещата могат да станат много по-сложни от това, така че наистина трябва разгледайте примерите да научиш повече. Вие ще откриете кодови фрагменти под всеки пример значи можеш създаване на градиентни преходи за фонови изображения и дори маски за изображения.

Маските на изображението могат да се използват за лого, например PNG изображение, което се скрива зад градиента. Това ви позволява да създавате анимирано лого на JS където наклона бавно преминава в целия текст.

Обърнете внимание на този пример много на JS / CSS код така че не е просто изпълнение.

Но колкото повече практикувате с Granim, толкова по-лесно ще е да го настроите и персонализирате. И тъй като това е единствената онлайн библиотека за градиентен преход, това е най-доброто решение за всеки проект.

Библиотеката все още се актуализира полу-често, за да можете да проверите раздела за проблемите за повече информация.

е доста малка библиотека така че няма много неща, които да се объркат или трябва да се актуализира. Това е, което прави Granim.js надеждно решение за всеки малък или голям сайт.

Да се изтеглете копие посетете страницата за пресата в GitHub или вземете копие на .JS файл директно от cdnjs. И към вижте източника на жив пример погледнете демото на CodePen, създадено от Джонатан Шнайдер.