Создавайте красивые градиентные переходы с помощью Granim.js

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

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

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

Granim - единственная библиотека JS, которую я знаю борьба с градиентными переходами. Это вопрос, который меня всегда интересовал, и я так и не нашел хорошего ответа. Granim является идеальным решением, и это построен на ванильном JavaScript, так что он может работать вместе с JQuery или любой другой библиотекой JS.

Просто бросить granim.js файл на вашу страницу для начала. Вы можете скачать копию с GitHub или разместить ее на CDN в реальном времени..

Вот базовый пример кода из репозитория GitHub:

Все может быть намного сложнее, чем это, так что вы действительно должны копаться в примерах Узнать больше. Ты найдешь фрагменты кода под каждый пример так что вы можете создавать градиентные переходы для фоновых изображений и даже масок изображений.

Маски изображений могут использоваться для логотипа, например изображения PNG, которое скрывается за градиентом. Это позволяет вам создавать JS-анимированный логотип где градиент медленно переходы по всему тексту.

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

Но чем больше вы будете практиковаться с Granim, тем легче будет его настроить и настроить. И так как это единственная настоящая онлайн библиотека градиентных переходов, это абсолютно лучшее решение для любого проекта..

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

Это довольно маленькая библиотека так что не так много вещей, которые могут пойти не так или нуждаются в обновлении. Это то, что делает Granim.js надежным решением для любого сайта, маленького или большого.

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