Кому не нравятся анимации на сайте? Хорошо, я знаю. Было бы здорово, если бы вы также могли использовать анимацию, чтобы оживить свой веб-сайт? Давайте посмотрим учебник о том, как использовать Mo.js

Шаг 1.Перейдите на codepen.io. Я не продвигаю codepen. Просто легко начать тестирование своего кода, не настраивая очень сложную среду.

Шаг 2.Нажмите значок шестеренки в правом верхнем углу. Во вкладке JS укажите такие ссылки:
https://cdn.jsdelivr.net/mojs/0.265.6/mo.min.js
https://cdn.jsdelivr.net/ mojs-player/0.43.15/mojs-player.min.js

Выберите в качестве препроцессора JS Babel. Затем сохраните и закройте. Вот и все. Просто и мило!

Шаг 3. В разделе CSS установите приятный темный фон.

body{
 background: #222;
}

Шаг 4.Начинается самое интересное. Если вы читали документацию, вы можете поиграть с различными формами. Начнем с нескольких.

Создайте новую константу под названием Burst. Вы можете назвать это чем угодно, все зависит от вас. Затем используйте новый mojs.Burst, чтобы создать эффект взрыва.
Свойства, которые вы видите, упоминаются в документации веб-сайта mojs.

const Burst = new mojs.Burst({
  radius: {0:200},
  count: 20,
  children: {
    shape: 'cross',
    stroke: 'teal',
    strokeWidth: {6:0},
    angle: {360: 0},
    duration: 3000,
    radius: {30:5},
  }
});

Первый радиус, который мы видим выше, — это диапазон эффекта. count — количество частиц, которые могут взорваться.

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

Шаг 5.Временная шкала. Мы создадим новый экземпляр с именем временная шкала, используя новое ключевое слово. Почему? Чтобы добавить еще много экземпляров в .add(), а также повторить анимацию. Затем добавьте метод play, и вы увидите, как анимируется ваш код.

const timeline = new mojs.Timeline({
  repeat: 999
})
.add(Burst)
.play();

Шаг 6. Вот и все! Перейдите по ссылке, чтобы увидеть, как это работает: Анимация Mojs

То, что я объяснил вам выше, — это просто базовое использование Mo.js. Я не хотел, чтобы это было сложно для новичков, поэтому сделал это довольно просто. Я бы посоветовал продолжать экспериментировать и узнавать больше. Это отличный продукт.

Я создал один здесь.

Удачного кодирования!