Недавно я заметил эффект падающего снега в Telegram, и мне захотелось сделать нечто подобное для моих сайтов. С самого начала я решил сделать нечто очень простое, но при этом красивое.
Дизайн
Начал я с разработки самой снежинки и примерной зарисовки анимации.
Написание кода
После разработки дизайна я приступил к разработке HTML-кода:
Стоит заметить, что скриншота не хватило, чтобы полностью поместить код снежинки, но не стоит переживать, ведь это всего лишь SVG картинка. Также я создал блок с id «place_for_snow», туда мы будем помещать наши будущие снежинки.
Итак, переходим к CSS. Здесь нам надо описать стили для снежинки и анимацию для неё. Наша анимация должна автоматически проигрываться при появлении новой снежинки и быть независимой от JS.
Отлично! Если теперь добавить снежинку на страницу вручную, то анимация всё равно проиграется. Остается только прописать JS-код, что ещё проще, ведь надо сделать генерацию снежинок в случайном месте через определённое количество времени.
Вывод
Итак, как выяснилось, добавить новогоднее настроение на сайт не так уж и сложно) Код получился довольно настраиваемым и простым, он не замёт много памяти.