В этой статье мы рассмотрим как делать анимированный градиент в JavaScript, с помощью библиотеки Granim.js, конечно, было можно всё сделать на чистом JS, но это достаточно сложно, да и зачем если можно использовать старению библиотеку.
Также посмотрите статью «Топ 9 библиотек для JavaScript», там вы тоже найдёте интересные и полезные библиотеки.
Установка Granim.js:
Для начала давайте скачаем эту библиотеку, для этого перейдите в GitHub по этой ссылке и скачайте архив.
После заходим в архив в папку granim.js-2.0.0 -> dist и от туда берём файл «granim.min.js» и перетаскиваем в папку с нашем проектом, и подключаем его.
1 | <script src="./granim.min.js"></script> |
Таким образом мы всё подключили.
Работа с Granim.js:
Работать с этой библиотекой крайне просто, я покажу пару примеров и вы убедитесь в этом, вот вам первый пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style> #canvas-basic { position: absolute; display: block; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; } </style> <canvas id="canvas-basic"></canvas> |
Здесь мы создали блок canvas и настроили стили для него, теперь создадим не большой пример работы самой библиотеки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let granimInstance = new Granim({ element: '#canvas-basic', direction: 'left-right', isPausedWhenNotInView: true, states : { "default-state": { gradients: [ ['#ff9966', '#ff5e62'], ['#00F260', '#0575E6'], ['#e1eec3', '#f05053'] ] } } }); |
Как видите мы тут создаём объект класса Granim, внутрь передаём объект с различными параметрами, первый element, передаём в него строку которая хранит селектор элемента canvas, где нужно от рендерить градиент.
Потом идёт direction, он отвечает за тип изменения градиента, то есть, в нашем случае стоит для него параметр left-right,значит анимация будет меняться слева на право, и есть параметр isPausedWhenNotInView, он нужен для остановки анимации, кода пользователь не находиться на странице, полезно для производительности, у нас стоит true, значит останавливается.
Последние это states, внутри него есть ещё один объект, который хранит параметр default-state, он в свою очередь тоже объект, и хранит параметр gradients, это уже массив, который хранит массивы градиентов.
Вот что у нас получилось:
Конечно это картинка, но можете мне поверить она анимированная, ещё если вы не хотите чтобы переливалось, то можете просто задать один массив градиента, и всё.
Вот ещё один пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | var granimInstance = new Granim({ element: '#canvas-complex', direction: 'left-right', isPausedWhenNotInView: true, states : { "default-state": { gradients: [ [ { color: '#833ab4', pos: .2 }, { color: '#fd1d1d', pos: .8 }, { color: '#38ef7d', pos: 1 } ], [ { color: '#40e0d0', pos: 0 }, { color: '#ff8c00', pos: .2 }, { color: '#ff0080', pos: .75 } ], ] } } }); |
Особенность этого примера, что теперь мы назначаем цвета не виде строки, а виде объекта, который хранит два свойства, color — цвет и pos — позиция, с первым всё понятно, а второй отвечает за позицию, до куда будет закраска элемента, значения могут быть от нуля до одного.
Вот последний пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | let granimInstance = new Granim({ element: '#canvas-image-blending', direction: 'top-bottom', isPausedWhenNotInView: true, image : { source: '../assets/img/bg-forest.jpg', blendingMode: 'multiply' }, states : { "default-state": { gradients: [ ['#29323c', '#485563'], ['#FF6B6B', '#556270'], ['#80d3fe', '#7ea0c4'], ['#f0ab51', '#eceba3'] ], transitionSpeed: 7000 } } }); |
Тут мы добавили параметр объект image, который хранит параметры картинки, это путь до неё и как её смешивать с градиентом.
Также а объект default-state добавился параметр transitionSpeed, он отвечает за скорость изменения градиента в миллисекундах.
Вывод:
В этой статье мы разобрали как делать градиенты с помощью библиотеки Granim.js, ещё стоит сказать, что все эти примеры которые у меня были, их можно посмотреть на официальном сайте по ссылке.
Подписываетесь на соц-сети:
Оценка:
Загрузка...