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

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

3 октября 2016

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

Топ 10 продающих лендингов для Вордпресс

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

Шаринг

шаринг

cardshara.me

Всё самое новое и интересное из мира Вордпресс в моём Телеграм-канале. Подписываемся!

Популярное в этом месяце
Иван Данилин
Автор: Иван Данилин

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

Добавить комментарий

Быстрый, надёжный и недорогой российский хостинг сайтов от 98 руб.
Подробнее