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

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

Читайте также: Круговые и эллиптические градиенты CSS3 [CSS3 Tips]

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

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

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

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

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

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

Маски изображений можно использовать для логотипа, например изображения PNG, которое скрывается за градиентом. Это позволяет вам создавать JS-анимированный логотип, в котором градиент медленно перемещается по всему тексту.
Обратите внимание, этот пример занимает много кода JS / CSS, так что это не простая реализация.

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

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

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

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

Увидеть перо Granim.js Демо Джонатан Шнайдер (@JonathanSchndr) на CodePen,

Читайте также: Как создать CSS градиентные цвета границ