Новогодняя тема на веб‑сайте: как добавить снежинки с помощью CSS и JavaScript

Зачем добавлять снежинки на сайт?

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

• Создают праздничное настроение у посетителей, усиливая эмоциональную вовлечённость.
• Повышают визуальную привлекательность страницы, делая дизайн более динамичным.
• Усиливают брендинг — если стилизовать снежинки под айдентику компании (цвет, форма, размер).
• Стимулируют конверсию — в праздничный период пользователи охотнее взаимодействуют с «атмосферными» сайтами.
• Демонстрируют заботу о пользователе — мелкие детали показывают внимание к комфорту аудитории.

Создаем эффект снежинок на веб-сайте

На страницу вашего веб-сайта, перед закрывающим тегом </body> вставьте следующий код:

<div id="snow-container"></div>

Далее необходимо подключить файл стилей snow.css со следующим содержимым:

#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}
.snowflake {
    position: absolute;
    top: -10px;
    color: white;
    user-select: none;
    animation-name: fall, sway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: 1, infinite;
}
@keyframes fall {
    to {
        transform: translateY(110vh);
    }
}
@keyframes sway {
    0%   { margin-left: 0; }
    50%  { margin-left: var(--wind); }
    100% { margin-left: 0; }
}

И перед закрывающим тегом </body> подключаем файл со скриптом snow.js следующего содержания:

document.addEventListener("DOMContentLoaded", function () {

const container = document.getElementById("snow-container");
const windStrength = 60;

function createSnowflake() {
    const snowflake = document.createElement("div");
    snowflake.className = "snowflake";
    snowflake.textContent = "❄";

    const size = Math.random() * 20 + 10;
    const fallDuration = Math.random() * 5 + 6;
    const swayDuration = Math.random() * 3 + 2;
    const wind = (Math.random() * windStrength * 2) - windStrength;

    snowflake.style.left = Math.random() * window.innerWidth + "px";
    snowflake.style.fontSize = size + "px";
    snowflake.style.opacity = Math.random();
    snowflake.style.animationDuration =
        `${fallDuration}s, ${swayDuration}s`;
    snowflake.style.setProperty("--wind", wind + "px");

    container.appendChild(snowflake);

    setTimeout(() => snowflake.remove(), fallDuration * 1000);
}

setInterval(createSnowflake, 120);

});

Эффект снежинок — это просто, бюджетно и эффективно. Даже минимальная реализация усилит новогоднее настроение и выделит ваш сайт среди конкурентов. Главное — не перегружать страницу: оптимально 30–70 снежинок с плавной анимацией.