Anime.js (/ˈæn.ə.meɪ/) - это достаточно легкая библиотека анимации JavaScript с простым, но мощным API.
Она работает со свойствами CSS, SVG, атрибутами DOM и объектами JavaScript.
Решил познакомиться с библиотекой Anime.js. На одном из Youtube-каналов нашел ряд любопытных видео по реализации простейших методов из библиотеки.
На видео с канала, можно посмотреть пошаговую реализацию и итоговый результат.
Я решил пройти по шагам из данного видео и разобрать получившийся код. Готовую реализацию можно посмотреть по ссылке - Background Animation AnimeJS
Разберем код:
Создадим класс контейнер, куда будем добавлять созданные через JS элементы
Добавим также текст для отображения поверх анимации
Создадим константу container и свяжем ее в DOM-дереве с классом .container
Запустим цикл for, в котором на каждой итерации, создадим элемент div с классом .block и добавим созданный блочный элемент в родительский элемент с классом .container
const container = document.querySelector('.container');
for (let i = 0; i <= 100; i++) {
const blocks = document.createElement('div');
blocks.classList.add('block');
container.appendChild(blocks);
}
На следующем шаге, создаем функцию animateBlocks, в которой будем организовывать обращение к библиотеке anime.js
Укажем тот селектор, к которому будем обращаться. В данном случае - это класс .block
function animateBlocks() {
anime({
targets: '.block',
Дальше идет блок CSS преобразований (CSS Transforms)
Значения translateX (сдвиг по горизонтали), translateY (сдвиг по вертикали), scale (масштаб) меняют первоначальные точки размещения и размеры трансформируемого объекта