Предварительно необходимо скачать и подключить сам скрипт https://sarcadass.github.io/granim.js/
HTML часть
<canvas id="canvas-basic"></canvas>
<canvas id="canvas-radial"></canvas>
CSS часть
#canvas-basic,
#canvas-radial {
position: relative;
display: block;
width: 100%;
height: 300px;
margin-bottom: 20px;
}
JS часть
<script>
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']
]
}
}
});
</script>
Пример
