Когда говорят об истории JavaScript часто упоминают, каким незаменимым он был при украшении сайтов снежинками ❄️ в канун Нового года 🎄.

А между тем, Новый год уже на следующей неделе, поэтому пора поспешить и принарядить свои сайты.

🗣️ Я попросил ChatGPT:

• на основе существующего логотипа сгенерировать новогодний
• написать код для реализации тех самых снежинок

Я сравнил код ChatGPT с кодом из статьи Доки “Снежинки” от Алёны Батицкой, взял от обоих решений лучшее, и вот что получилось.

✍️ Кратко о реализации:

• Берём символы Unicode для снежинок — ❄ ❅ ❆

• В разметке создаём нужное количество снежинок — у меня 120

• Каждая снежинка состоит из 2-х частей

  • контейнер — для анимации падения
  • сама снежинка — для анимации поворота

• Все снежинки кладём в один контейнер и выставляем ему pointer-events: none, чтобы не мешать взаимодействию со страницей

• Контейнеру выставляем flex-direction: row, чтобы равномерно распределить снежинки по экрану

• Начальное и конечное положения снежинок находится немного за пределами экрана, чтобы они плавно появлялись и исчезали

• Выставляем случайным образом:

  • размер снежинок (`font-size`) — от 0.7em до 1.5em
  • длительность анимации падения — от 10 до 30 секунд
  • задержку анимации — от 1 до 30 секунд

• Задержка анимации нужна, чтобы снежинки падали постепенно

• Выставляем разные цвета снежинок

• Исходники здесь 💾

• Демо здесь 🖥️

@cherkashindev