29.08.2017

Анимация градиента с плагином granim.js

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

Для этого нужно воспользоваться библиотекой granim.js: https://sarcadass.github.io/granim.js/

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

granim.min.js

<canvas id="canvas-basic"></canvas>
<canvas id="canvas-radial"></canvas>

#canvas-basic,
#canvas-radial {
	position: relative;
	display: block;
	width: 100%;
	height: 300px;
	margin-bottom: 20px;
}

var granimInstance = new Granim({
	element: '#canvas-basic',
	name: 'basic-gradient',
	direction: 'left-right',
	opacity: [1, 1],
	isPausedWhenNotInView: true,
	states : {
		"default-state": {
			gradients: [
				['#1967c3', '#4a90e2'],
				['#02AAB0', '#00CDAC'],
				['#DA22FF', '#9733EE']
			]
		}
	}
});

var granimInstance = new Granim({
	element: '#canvas-radial',
	name: 'radial-gradient',
	direction: 'radial',
	opacity: [1, 1],
	isPausedWhenNotInView: true,
	states : {
		"default-state": {
			gradients: [
				['#ffb347', '#ffcc33'],
				['#83a4d4', '#b6fbff'],
				['#9D50BB', '#6E48AA']
			]
		}
	}
});

Демонстрация