Создаём реалистичный эффект падающего снега на любом сайте с помощью JavaScript и CSS

вторник, 24 декабря 2024 г.

Узнайте, как с помощью простого JavaScript и CSS добавить реалистичный эффект падающего снега на любой сайт. Снежинки плавно падают, вращаются и отклоняются ветром, не нарушая функциональность сайта. Этот эффект идеально подходит для праздничных акций, новогодних тематик или просто для создания атмосферы зимнего настроения. Легко встраивается в существующие сайты без использования canvas.

Код для реалистичного падающего снега

// Создаем контейнер для снежинок
const snowflakesContainer = document.createElement('div');
snowflakesContainer.style.position = 'fixed';
snowflakesContainer.style.top = '0';
snowflakesContainer.style.left = '0';
snowflakesContainer.style.width = '100%';
snowflakesContainer.style.height = '100%';
snowflakesContainer.style.zIndex = '9999'; // Убедимся, что снег находится поверх всего
snowflakesContainer.style.pointerEvents = 'none'; // Чтобы не мешать взаимодействию с сайтом
snowflakesContainer.style.overflow = 'hidden';
document.body.appendChild(snowflakesContainer);

// Добавляем стили для анимации
const style = document.createElement('style');
style.innerHTML = `
    @keyframes fall {
        0% {
            transform: translate(0, -10px) rotate(0deg);
        }
        100% {
            transform: translate(20px, 110vh) rotate(360deg);
        }
    }
`;
document.head.appendChild(style);

// Создаем снежинки
for (let i = 0; i < 100; i++) {
    const snowflake = document.createElement('div');
    snowflake.style.position = 'absolute';
    snowflake.style.width = `${Math.random() * 5 + 2}px`; // Размер снежинки
    snowflake.style.height = `${Math.random() * 5 + 2}px`;
    snowflake.style.background = 'white';
    snowflake.style.borderRadius = '50%';
    snowflake.style.top = `${Math.random() * -100}%`; // Начальная позиция сверху
    snowflake.style.left = `${Math.random() * 100}%`; // Случайная позиция слева
    snowflake.style.animation = `fall ${Math.random() * 10 + 5}s linear infinite`; // Анимация падения
    snowflake.style.animationDelay = `${Math.random() * 2}s`; // Задержка начала анимации
    snowflake.style.filter = `blur(${Math.random() * 1}px)`; // Туманность
    snowflakesContainer.appendChild(snowflake);
}

Как использовать:
1. В консоли браузера:
- Откройте сайт, на который хотите добавить снег.
- Откройте консоль разработчика (клавиша F12 или Ctrl+Shift+I).
- Вставьте весь код выше в консоль и нажмите Enter.
- Снег появится на странице.

2. В HTML-коде сайта:
Вставьте весь код внутри тега script перед закрывающим тегом body:

<script>
    // Вставьте код здесь
</script>

3. Как внешний скрипт:
- Сохраните код в отдельный файл, например, snow.js.
- Подключите его к сайту:

<script src="snow.js"></script>

Александр

Fullstack-разработчик в Москве

Профессиональная разработка веб-приложений на Node.js с использованием современных frontend и backend фреймворков. Создание, продвижение, поддержка и обслуживание сайтов. Эффективно, прибыльно.