Створюйте гарні градієнтні переходи з Granim.js

Веб-дизайн сповнений краси і приємного дизайну інтерфейсу. Деякі функції функціонують, а інші - тільки для показу. Градієнтні переходи є виключно для шоу але вони упаковують досить удар!

С Granim.js, можна будувати звичайні повнокольорові переходи градієнта які виглядають гладко і сітка красиво з будь-яким веб-сайтом.

Ви можете знайти купу зразків на замовлення на головній сторінці прикладів з багатьма різними стилями від простих переходів до більш складних анімацій з використанням фонових зображень.

Granim - єдина бібліотека JS, яку я знаю подолання градієнтних переходів. Це питання, про яке я завжди замислювався, і ніколи не знайшов чудової відповіді. Granim є ідеальним рішенням і це побудований на ванільному JavaScript, тому він може працювати поряд з jQuery або будь-якою іншою бібліотекою JS.

Просто скиньте granim.js на вашу сторінку для початку. Можна або завантажити копію з GitHub, або скопіювати одну з живих CDN.

Ось базовий зразок коду від репо GitHub:

Речі можуть стати набагато складнішими, ніж це так копаються в прикладах дізнатися більше. Ви знайдете фрагменти коду під кожен приклад так що ви можете створюють градієнтні переходи для фонових зображень і навіть масок зображень.

Маски зображень можна використовувати для логотипу, наприклад зображення PNG, яке приховано за градієнтом. Це дозволяє створювати логотип JS-animated де градієнт повільно переходить по всьому тексту.

Зверніть увагу на цей приклад багато коду JS / CSS тому це не проста реалізація.

Але чим більше ви практикуєте з Granim, тим простіше налаштувати і налаштувати. І, будучи єдиною справжньою бібліотекою переходів у градієнті, це абсолютно найкраще рішення для будь-якого проекту.

Бібліотека все ще оновлюється напівчасто, щоб отримати додаткову інформацію.

Його досить маленька бібліотека так що не надто багато речей, щоб піти не так або потрібно оновити. Це те, що робить Granim.js надійним рішенням для будь-якого сайту, невеликого або великого розміру.

До завантажити копію відвідайте сторінку релізів на GitHub або захопіть копію .js файл безпосередньо з cdnjs. І до перегляньте джерело на живому прикладі подивіться на цей демо-код CodePen, створений Джонатаном Шнайдером.