Granim.js — простой, но мощный фреймворк для создания анимированных градиентов. Он идеально подходит для добавления динамических и привлекательных визуальных эффектов на веб-сайты.
Установка и подключение
Для начала скачайте Granim.js со страницы загрузки (ссылка в описании), распакуйте архив и поместите файл granim.min.js из папки dist в папку проекта. Подключите его к HTML-файлу, добавив следующую строку в секцию <head> или перед закрывающим тегом </body>:
<script src="granim.min.js"></script>Также потребуется jQuery:
<script src="jquery.js"></script>Создание анимированного градиента
Создайте элемент <canvas> в HTML-коде внутри тега <body>:
<canvas id="my-canvas"></canvas>Добавьте стили:
#my-canvas {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Инициализируйте Granim.js с помощью JavaScript. Пример линейного градиента:
new Granim({
element: '#my-canvas',
name: 'basic-gradient',
direction: 'left-right',
opacity: [1,1],
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: [
['#ff7979', '#d43e3e'],
['#246e8f', '#246e8f']
]
}
}
});Этот код создаёт градиент, плавно переходящий от одного цвета к другому слева направо. Цвета, направление и другие параметры можно изменять, согласно API.
Настройка градиента
Granim.js предлагает множество опций:
- direction: Направление градиента (‘left-right’, ‘top-bottom’, ‘diagonal’, ‘radial’).
- opacity: Прозрачность градиента (массив из двух чисел).
- isPausedWhenNotInView: Приостанавливает анимацию, если градиент вне поля зрения.
- states: Определение нескольких состояний градиента с различными настройками.
Granim.js поддерживает различные типы градиентов, включая радиальные и градиенты на изображениях или тексте. Подробности в документации.
Обработка событий
Granim.js позволяет отслеживать события с помощью обратных вызовов (callbacks). Например, для события start:
new Granim({
// ... другие параметры ...
callbacks: {
start: function() {
console.log('Градиент запущен!');
}
}
});Доступны события start, end, loop, change.
Granim.js — мощный и простой фреймворк для создания анимированных градиентов. Он позволяет легко добавлять динамичные и привлекательные визуальные эффекты на веб-страницы, улучшая пользовательский опыт. Гибкая настройка и широкий спектр функций делают Granim.js отличным инструментом для проектов.