Хлопушка: конфетти из ничего

Урок 12.4 · Интерфейсы и сайты с нуля · Модуль 12. Праздник на экране · По подписке

Цель урока: Научиться создавать элементы кодом: двадцать частиц, случайные позиции, полёт по кадрам и уборка после него.

Нужно знать заранее: Уроки 4.2 и 12.1

Объяснение

Зачем это нужно: Конфетти, искры, всплывающие уведомления, «плюс один» над кнопкой — всё это появляется на секунду и исчезает. Написать двадцать таких элементов в разметке можно, но они будут лежать на странице всегда, и «случайная» россыпь каждый раз окажется одинаковой. Поэтому элементы создаёт программа: она решает, сколько их, где они и какого цвета. Это первый урок курса, где разметку пишет не автор, а код.

Как это работает: createElement создаёт элемент, которого ещё нет на странице: const spark = document.createElement('span'). Пока его не поставили в документ через appendChild, он существует только в памяти. Math.random() возвращает случайное число от 0 до 1 (единицу не включает). Умножьте на 100 и округлите — получите случайный процент для left, а выражение Math.random() * 120 - 60 даёт случайное число от −60 до 60 для разлёта в стороны. Полёт делают кадры: @keyframes spark-fly описывает, каким элемент станет в конце (улетел, повернулся, растворился), а animation: spark-fly 0.9s forwards запускает это один раз и оставляет конечное состояние. Уборка — по событию animationend: когда полёт закончился, элемент больше не нужен. Без уборки после сотого нажатия на странице будут тысячи невидимых частиц, и она начнёт тормозить.

Уроки модуля 12

• 12.1 Подарок, который просит нажать (бесплатно)
• 12.2 Колесо, которое крутится и останавливается (по подписке)
• 12.3 Мемори: найди пару (по подписке)
• 12.4 Хлопушка: конфетти из ничего — вы здесь (по подписке)
• 12.5 Проект: ловец подарков (по подписке)
• 12.6 Тайный Санта: жеребьёвка без повторов (по подписке)
• 12.7 Отсчёт до праздника (по подписке)