Снежинки с эффектом параллакса

Демонстрация эффекта

Снежинки падают с разной скоростью, создавая эффект глубины (параллакса). Более крупные снежинки падают быстрее, создавая ощущение трехмерности.

Как это работает

• Снежинки создаются с помощью JavaScript и добавляются в контейнер

• Каждая снежинка имеет случайный размер, скорость и начальную позицию

• Эффект параллакса достигается за счет разной скорости падения

• При достижении нижней границы снежинки возвращаются вверх

Количество снежинок: 0

Код для встраивания на ваш сайт

// 1. Добавьте этот контейнер в HTML-файл
<div id="snowflakes-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"></div>

// 2. Добавьте этот JavaScript код перед закрывающим тегом </body>
<script>
    // Конфигурация
    const config = {
        snowflakeCount: 80,
        minSize: 5,
        maxSize: 20,
        minSpeed: 0.5,
        maxSpeed: 2.5,
        colors: ['#ffffff', '#e3f2fd', '#bbdefb', '#90caf9']
    };
    
    // Создание снежинок
    function createSnowflakes() {
        const container = document.getElementById('snowflakes-container');
        if (!container) return;
        
        // Очищаем контейнер перед созданием новых снежинок
        container.innerHTML = '';
        
        for (let i = 0; i < config.snowflakeCount; i++) {
            createSnowflake(container);
        }
        
        // Обновляем счетчик снежинок
        updateSnowflakeCount();
    }
    
    // Создание одной снежинки
    function createSnowflake(container) {
        const snowflake = document.createElement('div');
        
        // Размер снежинки
        const size = Math.random() * (config.maxSize - config.minSize) + config.minSize;
        
        // Скорость падения (для эффекта параллакса)
        const speed = Math.random() * (config.maxSpeed - config.minSpeed) + config.minSpeed;
        
        // Начальная позиция
        const startX = Math.random() * 100;
        const startY = Math.random() * -20;
        
        // Цвет снежинки
        const color = config.colors[Math.floor(Math.random() * config.colors.length)];
        
        // Настройка стилей
        snowflake.style.position = 'absolute';
        snowflake.style.width = `${size}px`;
        snowflake.style.height = `${size}px`;
        snowflake.style.backgroundColor = color;
        snowflake.style.borderRadius = '50%';
        snowflake.style.left = `${startX}vw`;
        snowflake.style.top = `${startY}vh`;
        snowflake.style.opacity = `${0.5 + Math.random() * 0.5}`;
        snowflake.style.boxShadow = '0 0 5px rgba(255, 255, 255, 0.5)';
        snowflake.style.pointerEvents = 'none';
        
        // Добавляем снежинку в контейнер
        container.appendChild(snowflake);
        
        // Анимация падения
        animateSnowflake(snowflake, speed, size);
    }
    
    // Анимация падения снежинки
    function animateSnowflake(snowflake, speed, size) {
        let x = parseFloat(snowflake.style.left);
        let y = parseFloat(snowflake.style.top);
        
        // Случайное смещение по горизонтали
        const drift = (Math.random() - 0.5) * 0.5;
        
        function fall() {
            y += speed;
            x += drift + Math.sin(y / 100) * 0.3; // Легкое колебание
            
            // Если снежинка достигла нижней границы, возвращаем её наверх
            if (y > 100) {
                y = -5;
                x = Math.random() * 100;
            }
            
            // Если снежинка вышла за горизонтальные границы
            if (x > 100) x = 0;
            if (x < 0) x = 100;
            
            snowflake.style.left = `${x}vw`;
            snowflake.style.top = `${y}vh`;
            
            // Запрашиваем следующий кадр анимации
            snowflake.animationId = requestAnimationFrame(fall);
        }
        
        // Начинаем анимацию
        fall();
    }
    
    // Обновление счетчика снежинок
    function updateSnowflakeCount() {
        const container = document.getElementById('snowflakes-container');
        if (!container) return;
        
        const countElement = document.getElementById('snowflake-count');
        if (countElement) {
            countElement.textContent = container.children.length;
        }
    }
    
    // Инициализация при загрузке страницы
    window.addEventListener('DOMContentLoaded', createSnowflakes);
    
    // Пересоздание снежинок при изменении размера окна
    window.addEventListener('resize', createSnowflakes);
</script>