Мой перевод этой статьи!!!
Когда дело доходит до движения и анимации, мне, наверное, больше всего нравится они, чем частицы. Вот почему каждый раз, когда я исследую новые технологии, я всегда заканчиваю тем, что создаю демонстрации с максимально возможным количеством частиц .
В этом посте мы сделаем еще больше магии частиц, используя API веб-анимации, чтобы создать эффект фейерверка при нажатии на кнопку.
Поддержка браузера
На момент написания этой статьи все основные браузеры - за исключением Safari и Internet Explorer - по крайней мере частично поддерживают API веб-анимации. Поддержка Safari может быть включена в меню разработчика «Экспериментальные функции».
Настройка HTML
Нам не нужно много HTML для этой демонстрации. Мы будем использовать <button> элемент, но это может быть другой тип элемента тега. Мы могли бы даже слушать любой щелчок на странице, чтобы частицы всплыли из любого места, если бы мы действительно этого хотели.
Настройка CSS
Поскольку каждая частица имеет несколько общих свойств CSS, мы можем установить их в глобальном CSS страницы. Поскольку вы можете создавать собственные элементы тегов в HTML, я буду использовать <particle> имя тега, чтобы избежать использования семантических тегов. Но правда в том, что можно анимировать <p>, <i> или любой тег по вашему выбору.
Да, в HTML можно писать любые теги, но это уже в другом уроке)))
Пара вещей, отметим здесь:
- Частицы не должны взаимодействовать с макетом страницы, поэтому мы устанавливаем в fixed позицию topи left в 0px каждом из них .
- Мы также удаляем события указателя, чтобы избежать какого-либо взаимодействия пользователя с частицами HTML, пока они находятся на экране.
Поскольку стилизация кнопки и макета страницы не является целью этой статьи, я оставлю это в стороне.
Настройка JavaScript
Вот шаги, которые мы будем выполнять в нашем JavaScript:
- Прослушайте событие нажатия на кнопку
- Создать 30 <particle> элементов и добавьте их в <body>
- Установить случайное width, height и background для каждой частицы
- Анимировать каждую частицу из положения мыши в случайное место, когда они исчезают
- Удалить <particle> из DOM, когда анимация завершена
Шаг 1: событие клика
Шаг 2: частицы
Шаг 3: Ширина, высота и фон частицы
Шаг 4: оживить каждую частицу
Поскольку мы имеем случайную задержку, частицы, ожидающие начала анимации, видны в верхнем левом углу экрана. Чтобы предотвратить это, мы можем установить нулевую непрозрачность для каждой частицы в нашем глобальном CSS.
Шаг 5: Удалить частицы после завершения анимации
Важно удалить элементы частиц из DOM. Так как мы создаем 30 новых элементов при каждом клике, память браузера может заполняться довольно быстро и вызывать неприятные вещи. Вот как мы можем это сделать:
Конечный результат
Объединение всего дает нам то, что мы ищем: красочный взрыв частицы добра.
Ссылка на проект!
HEY!
Не видите анимацию в демоверсии? Проверьте, поддерживает ли ваш браузер API веб-анимации, в таблице поддержки в верхней части сообщения.
Будь креативным!
Поскольку всё это использует CSS, очень просто изменить стили частиц. Вот пять примеров использования различных форм ... и даже персонажей!
Ссылка на проект!
Пожалуйста подпишитесь и поставьте лайк за эту красоту!!!