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

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

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 можно свободно использовать в любых коммерческих проектах.

21.07.2019, опубликовано 10 лет назад