Granim.js

Делаем анимированные градиенты

3 октября 2016 93

Я периодически рассказываю о новых интересных JS-библиотеках, с которыми мне приходится сталкиваться в работе. Сегодня я хочу продолжить эту традицию и рассказать об одной маленькой библиотеке, с помощью которой можно создавать впечатляющие фоны в виде анимированных цветных градиентов.

CodeCanyon: Лучшие плагины для WordPress
CodeCanyon: Лучшие плагины для WordPress

Granim.js

Итак, встречаем Granim.js от французского разработчика Benjamin Blonde. Вес библиотеки составляет менее 10 Кбайт, что позволяет использовать её в любом проекте, не задумываясь об увеличении скорости загрузки страницы.

  Демо   API   Скачать

Использование Granim.js

<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>
<!-- Call the script -->
 
<script src="granim.min.js"></script>
 
<!-- Create a Granim instance --> <script>
var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [1, 1],
   states : {
       "default-state": {
           gradients: [
               ['#834D9B', '#D04ED6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
});
</script>

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

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

Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе WordPress.

Комментарии

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее