Untitled

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
    <style>
        body, html {
            margin:0;
            padding:0;
            width:100%;
            height:100%;
            overflow:hidden;
        }

       /* Контейнер для кнопок */
.buttons-container {
    display: flex; /* Используем Flexbox для выравнивания кнопок */
    position: absolute; /* Позиционируем контейнер абсолютно, чтобы он не занимал место в потоке документа */
    top: 20px;
    left: 20px;
    z-index: 100;
}

/* Стили для кнопок */
.toggleWeather {
    opacity: 0.15; /* Добавляем полупрозрачность */
    background-color: rgba(255, 255, 255, 0.1); /* Добавляем полупрозрачный белый фон */
    border: none; /* Убираем границу */
    color: white; /* Устанавливаем белый цвет текста */
    font-size: large; /* Увеличиваем размер шрифта */
    cursor: pointer; /* Устанавливаем курсор в виде указателя */
    border-radius: 40%; /* Делаем кнопки круглыми */
    width: 30px; /* Устанавливаем ширину кнопки */
    height: 30px; /* Устанавливаем высоту кнопки */
    filter: grayscale(100%); /* Делаем кнопки черно-белыми */
    display: flex; /* Используем Flexbox для выравнивания */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    align-items: center; /* Центрируем содержимое по вертикали */
    text-align: center; /* Центрируем текст */
    margin-right: 1px; /* Добавляем отступ справа */
}

/* Стили для наведения мыши на кнопки */
.toggleWeather:hover {
    opacity: 0.25; /* Убираем полупрозрачность */
    background-color: rgba(255, 255, 255, 0.2); /* Делаем фон более непрозрачным при наведении */
    filter: none; /* Убираем черно-белый фильтр при наведении */
}

/* Убираем отступ справа для последней кнопки */
.toggleWeather:last-child {
    margin-right: 0;
}


        #fireflies-effect, #snow-container, #rain-container, #fog__container, #petals-container, #canvas {
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            visibility: hidden; /* Изначально скрыт */
        }

        /* Стили для снега */
        .snowflake {
            position: absolute;
            top: -10px;
            width:5px;
            height:5px;
            background:white;
            border-radius:50%;
        }

        /* Стили для дождя */
        .rain__drop {
            animation-delay: calc(var(--d) *1s);
            animation-duration: calc(var(--s) *2s);
            animation-iteration-count: infinite;
            animation-name: drop;
            animation-timing-function: linear;
            height:15px;
            left: calc(var(--x) *1%);
            position: absolute;
            top: calc(var(--s) *-1px);
            width:2px;
            background-color: #A1C6CC;
            opacity: var(--o);
        }

        @keyframes drop {
            to {
                transform: translateY(100vh);
                opacity:0;
            }
        }

        /* Стили для сакуры */
        .petal {
            width:1rem;
            height:1rem;
            position: absolute;
            background-image: url('https://i.ibb.co/dLPvsXQ/q8s1ib.png');
            background-size: contain;
            background-repeat: no-repeat;
            opacity:0;
        }

        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(720deg);
                opacity:1;
            }
        }
    </style>
    </head>
    <body>

    <!-- Контейнер для кнопок -->
<div class="buttons-container">
    <button class="toggleWeather" onclick="toggleFireflies()">🪰</button>
    <button class="toggleWeather" onclick="toggleSnow()">❄️</button>
    <button class="toggleWeather" onclick="toggleRain()">🌧️</button>
    <button class="toggleWeather" onclick="toggleFog()">🌫️</button>
    <button class="toggleWeather" onclick="togglePetals()">🌸</button>
    <button class="toggleWeather" onclick="toggleRays()">🌟</button>
    <button class="toggleWeather" onclick="toggleLeaves()">🍁</button>
</div>


    <canvas id="fireflies-effect"></canvas>
    <div id="snow-container"></div>
    <div id="rain-container"></div>
    <div id="petals-container"></div>
    <!-- Контейнер для сакуры -->
    <!-- Контейнер для листьев -->
    <div id="leaves-container"></div>
    <!-- Модуль тумана -->
    <section id="fog-container" class="fog">
        <div class="fog__container">
            <div class="fog__img fog__img--first"></div>
            <div class="fog__img fog__img--second"></div>
        </div>
    </section>
    <!-- Канвас для лучей -->
    <canvas id="canvas"></canvas>
    <style>
        /* Стили для тумана */
        .fog {
            position: fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            overflow:hidden;
            z-index:20; /* Убедитесь, что туман отображается поверх других элементов */
            visibility: hidden; /* Изначально скрыт */
        }

        .fog__container {
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            overflow:hidden;
        }

        .fog__img {
            position: absolute;
            top:0;
            left:0;
            width:300vw; /* Убедитесь, что ширина достаточно велика, чтобы покрыть весь экран */
            height:100%; /* Убедитесь, что высота растягивается на всю высоту экрана */
        }

        .fog__img--first {
            background: url('https://i.ibb.co/wSwQhRY/download.png') repeat-x;
            background-size: contain;
            background-position: center;
            animation: marquee-1st-layer linear infinite;
            animation-duration:60s;
        }

        .fog__img--second {
            background: url('https://i.ibb.co/3ryRX0w/download-1.png') repeat-x;
            background-size: contain;
            background-position: center;
            animation: marquee-2nd-layer linear infinite;
            animation-duration:40s;
        }

        @keyframes marquee-1st-layer {
            to {
                transform: translate3d(-200vw,0,0);
            }
        }

        @keyframes marquee-2nd-layer {
            to {
                transform: translate3d(-200vw,0,0);
            }
        }
    </style>

    <script>
    // Функция для переключения тумана
    let fogActive = false; // Флаг активности тумана

    function toggleFog() {
        fogActive = !fogActive;
        const fogContainer = document.getElementById('fog-container');
        fogContainer.style.visibility = fogActive ? 'visible' : 'hidden';
    }

    </script>
    <script>
        const firefliesCanvas = document.getElementById('fireflies-effect');
        const ctx = firefliesCanvas.getContext('2d');
        const fireflies = [];
        let firefliesAnimationId;
        let snowflakesActive = false; // Флаг активности снега
        let rainActive = false; // Флаг активности дождя
        let petalsActive = false; // Флаг активности сакуры
        let raysActive = false; // Флаг активности лучей

        class Firefly {
            constructor() {
                this.x = Math.random() * firefliesCanvas.width;
                this.y = Math.random() * firefliesCanvas.height;
                this.s = Math.random() * 2;
                this.ang = Math.random() * 2 * Math.PI;
                this.v = this.s * this.s / 4;
            }
            move() {
                this.x += this.v * Math.cos(this.ang);
                this.y += this.v * Math.sin(this.ang);
                this.ang += Math.random() * 20 * Math.PI / 180 - 10 * Math.PI / 180;
            }
            show() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.s, 0, 2 * Math.PI);
                ctx.fillStyle = "#fddba3";
                ctx.fill();
            }
        }

        function drawFireflies() {
            if (fireflies.length < 100) {
                fireflies.push(new Firefly());
            }
            ctx.clearRect(0, 0, firefliesCanvas.width, firefliesCanvas.height);
            fireflies.forEach((firefly, index) => {
                firefly.move();
                firefly.show();
                if (firefly.x < 0 || firefly.x > firefliesCanvas.width || firefly.y < 0 || firefly.y > firefliesCanvas.height) {
                    fireflies.splice(index, 1);
                }
            });
        }

        let firefliesActive = false; // Переменная для отслеживания состояния анимации светлячков

        function loopFireflies() {
            drawFireflies();
            firefliesAnimationId = requestAnimationFrame(loopFireflies);
        }

            function startFireflies() {
        if (!firefliesAnimationId) { // Запускаем анимацию, только если она еще не запущена
            firefliesCanvas.style.visibility = 'visible';
            loopFireflies();
        }
    }

    function stopFireflies() {
        if (firefliesAnimationId) { // Останавливаем анимацию, только если она была запущена
            cancelAnimationFrame(firefliesAnimationId);
            firefliesAnimationId = null; // Сбрасываем ID анимации
            firefliesCanvas.style.visibility = 'hidden';
        }
    }

    function toggleFireflies() {
        firefliesActive = !firefliesActive;
        if (firefliesActive) {
            startFireflies();
        } else {
            stopFireflies();
        }
    }


        </script>
    <script>
       function toggleSnow() {
        snowflakesActive = !snowflakesActive;
        const snowContainer = document.getElementById('snow-container');
        snowContainer.style.visibility = snowflakesActive ? 'visible' : 'hidden';
        if (snowflakesActive) {
            startSnow();
        } else {
            stopSnow();
        }
    }

    let rainAnimationId;

    function createRainDrops() {
        const rainContainer = document.getElementById('rain-container');
        const droplets = 250;
        // Создаем капли дождя
        Array.from({ length: droplets }).forEach((_, index) => {
            const rainDrop = document.createElement('div');
            rainDrop.classList.add('rain__drop');
            rainDrop.style.setProperty('--x', Math.floor(Math.random() * 100));
            rainDrop.style.setProperty('--d', (Math.random() * 2) - 1);
            rainDrop.style.setProperty('--s', Math.random() + 0.5);
            rainDrop.style.setProperty('--o', Math.random());
            rainContainer.appendChild(rainDrop);
        });
    }

    function animateRain() {
        // Здесь может быть ваш код для анимации капель дождя, если он требуется
        // Если анимация дождя полностью на CSS, этот шаг не нужен
        rainAnimationId = requestAnimationFrame(animateRain);
    }

    function startRain() {
        if (!rainAnimationId) {
            createRainDrops();
            animateRain();
        }
    }

    function stopRain() {
        if (rainAnimationId) {
            cancelAnimationFrame(rainAnimationId);
            rainAnimationId = null;
            const rainContainer = document.getElementById('rain-container');
            rainContainer.innerHTML = '';
        }
    }
    function toggleRain() {
        rainActive = !rainActive;
        const rainContainer = document.getElementById('rain-container');
        rainContainer.style.visibility = rainActive ? 'visible' : 'hidden';
        if (rainActive) {
            startRain();
        } else {
            stopRain();
        }
    }

    function togglePetals() {
        petalsActive = !petalsActive;
        const petalsContainer = document.getElementById('petals-container');
        petalsContainer.style.visibility = petalsActive ? 'visible' : 'hidden';
        if (petalsActive) {
            startPetals();
        } else {
            stopPetals();
        }
    }

        </script>
    <script>
        // Создаем снежинки
    let snowAnimationId;

    function createSnowflakes() {
        const snowContainer = document.getElementById('snow-container');
        const total = 200;
        // Создаем снежинки
        Array.from({ length: total }).forEach((_, index) => {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            snowContainer.appendChild(snowflake);

            // Стили и анимация для снежинки
            const randomX = Math.random() * 100;
            const randomOffset = (Math.random() * 200 - 100);
            const randomXEnd = randomX + randomOffset;
            const randomScale = Math.random();
            const fallDuration = (Math.random() * 20 + 10) + 's';
            const fallDelay = (Math.random() * -30) + 's';

            snowflake.style.opacity = Math.random();
            snowflake.style.transform = `translate(${randomX}vw, -10px) scale(${randomScale})`;
            snowflake.style.animation = `fall-${index} ${fallDuration} ${fallDelay} linear infinite`;

            const keyframes = `
                @keyframes fall-${index} {
                    to {
                        transform: translate(${randomXEnd}vw, ${window.innerHeight}px) scale(${randomScale});
                    }
                }
            `;
            const styleSheet = document.createElement('style');
            styleSheet.type = 'text/css';
            styleSheet.innerText = keyframes;
            document.head.appendChild(styleSheet);
        });
    }

    function animateSnow() {
        // Здесь может быть ваш код для анимации снежинок, если он требуется
        // Если анимация снежинок полностью на CSS, этот шаг не нужен
        snowAnimationId = requestAnimationFrame(animateSnow);
    }

    function startSnow() {
        if (!snowAnimationId) {
            createSnowflakes();
            animateSnow();
        }
    }

    function stopSnow() {
        if (snowAnimationId) {
            cancelAnimationFrame(snowAnimationId);
            snowAnimationId = null;
            document.querySelectorAll('.snowflake').forEach(el => el.remove());
        }
    }

        // Функции для сакуры
        let petalsAnimationId;

    function createPetals() {
        const petalsContainer = document.getElementById('petals-container');
        const totalPetals = Math.floor(Math.random() * (50 - 20) + 20);
        for (let i = 0; i < totalPetals; i++) {
            const petal = document.createElement('div');
            petal.classList.add('petal');
            petal.style.top = '-10rem';
            petal.style.left = `${Math.random() * window.innerWidth}px`;
            petal.style.animation = `fall ${Math.random() * (30 - 10) + 10}s linear infinite`;
            petal.style.animationDelay = `${Math.random() * -20}s`;
            petalsContainer.appendChild(petal);
        }
    }

    function animatePetals() {
        // Здесь может быть ваш код для анимации лепестков, если он требуется
        // Если анимация лепестков полностью на CSS, этот шаг не нужен
        petalsAnimationId = requestAnimationFrame(animatePetals);
    }

    function startPetals() {
        if (!petalsAnimationId) {
            createPetals();
            animatePetals();
        }
    }

    function stopPetals() {
        if (petalsAnimationId) {
            cancelAnimationFrame(petalsAnimationId);
            petalsAnimationId = null;
            clearPetals();
        }
    }

    function togglePetals() {
        petalsActive = !petalsActive;
        const petalsContainer = document.getElementById('petals-container');
        petalsContainer.style.visibility = petalsActive ? 'visible' : 'hidden';
        if (petalsActive) {
            startPetals();
        } else {
            stopPetals();
        }
    }

        </script>
    <script>
       function resizeCanvas() {
        firefliesCanvas.width = window.innerWidth;
        firefliesCanvas.height = window.innerHeight;
        // Перезапускаем анимацию светлячков при изменении размера окна, чтобы обновить позиции
        if (firefliesActive) {
            stopFireflies();
            startFireflies();
        }
    }

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

        // Функции для управления анимацией лучей
        function startRays() {
            // Здесь должен быть код для запуска анимации лучей
        }

        function stopRays() {
            // Здесь должен быть код для остановки анимации лучей
        }

        function toggleRays() {
        raysActive = !raysActive;
        const raysCanvas = document.getElementById('canvas');
        raysCanvas.style.visibility = raysActive ? 'visible' : 'hidden';
        if (raysActive) {
            startRays();
        } else {
            stopRays();
        }
    }
        </script>
        <script>
           (function(window, document, undefined) {
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            osCanvas = document.createElement('canvas'),
            osCtx = osCanvas.getContext('2d'),
            objects = [],
            numRays = 30,
            numParticles = 0,
            raysAnimationId; // Добавляем переменную для хранения ID анимационного кадра


                class Ray {
                    constructor() {
                        this.ctx = osCtx;
                        this.angle = 85 * Math.PI / 180;
                        this.init();
                    }
                    init() {
                        this.velocity = 0.25 - Math.random() * 0.5;
                        this.len = canvas.height / 2 + Math.random() * (canvas.height / 2);
                        this.start = {
                            x: Math.random() * (canvas.width + 100) - 50,
                            y: 0
                        };
                        this.end = {
                            x: this.start.x + this.len * Math.cos(this.angle),
                            y: this.start.y + this.len * Math.sin(this.angle)
                        };
                        this.ttl = 100 + Math.random() * 200;
                        this.life = 0;
                        this.width = 0.5 + Math.random() * 4;
                        this.hue = Math.round(45 + Math.random() * 15).toString();
                        this.saturation = Math.round(20 + Math.random() * 40).toString();
                    }
                    color() {
                        var alpha = wave(this.life, this.ttl) * 0.005,
                            color1 = `hsla(${this.hue},${this.saturation}%,60%,${alpha})`,
                            color2 = 'hsla(50,20%,20%,0)',
                            gradient = ctx.createLinearGradient(this.start.x, this.start.y, this.end.x, this.end.y);
                        gradient.addColorStop(0, color1);
                        gradient.addColorStop(1, color2);
                        return gradient;
                    }
                    draw() {
                        this.ctx.beginPath();
                        this.ctx.strokeStyle = this.color();
                        this.ctx.lineWidth = this.width;
                        this.ctx.moveTo(this.start.x, this.start.y);
                        this.ctx.lineTo(this.end.x, this.end.y);
                        this.ctx.stroke();
                        this.ctx.closePath();
                    }
                    update() {
                        if (this.life > this.ttl) {
                            this.init();
                        }
                        this.life++;
                        this.start.x += this.velocity;
                        this.end.x += this.velocity;
                    }
                }

                function wave(t, a) {
                    return Math.abs((t + a / 2) % a - a / 2);
                }

                function createObjects() {
                    objects = [];
                    for (var i = 0; i < numRays; i++) {
                        var ray = new Ray();
                        objects.push(ray);
                    }
                }

                function render() {
                    osCtx.clearRect(0, 0, canvas.width, canvas.height);
                    osCtx.shadowBlur = 30;
                    osCtx.shadowColor = "white";
                    osCtx.globalCompositeOperation = "lighter";
                    for (var i = 0, len = objects.length; i < len; i++) {
                        var obj = objects[i];
                        obj.update();
                        obj.draw();
                    }
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(osCanvas, 0, 0);
                }

                function loop() {
            render();
            raysAnimationId = window.requestAnimationFrame(loop); // Обновляем ID анимационного кадра
        }

        function onResize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            osCanvas.width = window.innerWidth;
            osCanvas.height = window.innerHeight;
        }

        window.addEventListener('resize', onResize);
        onResize();
        createObjects();
        // loop(); // Убираем вызов loop из самовызывающейся функции

        window.startRays = function() {
            if (!raysAnimationId) { // Запускаем анимацию, только если она еще не запущена
                document.getElementById('canvas').style.visibility = 'visible';
                loop();
            }
        };

        window.stopRays = function() {
            if (raysAnimationId) { // Останавливаем анимацию, только если она была запущена
                window.cancelAnimationFrame(raysAnimationId);
                raysAnimationId = null; // Сбрасываем ID анимации
                document.getElementById('canvas').style.visibility = 'hidden';
            }
        };
    })(this, document);

            </script>
        <script>
            // Функции для осенних листьев
            let leavesActive = false; // Флаг активности падения листьев
            let leavesAnimationId;

            function createLeaves() {
                const leavesContainer = document.getElementById('leaves-container');
                const totalLeaves = 30; // Количество листьев
                for (let i = 0; i < totalLeaves; i++) {
                    const leaf = document.createElement('div');
                    leaf.classList.add('leaf');
                    leaf.style.top = '-10rem';
                    leaf.style.left = `${Math.random() * window.innerWidth}px`;
                    leaf.style.animation = `fall ${Math.random() * (30 - 10) + 10}s linear infinite`;
                    leaf.style.animationDelay = `${Math.random() * -20}s`;
                    leavesContainer.appendChild(leaf);
                }
            }

            function animateLeaves() {
                // Здесь может быть ваш код для анимации листьев, если он требуется
                // Если анимация листьев полностью на CSS, этот шаг не нужен
                leavesAnimationId = requestAnimationFrame(animateLeaves);
            }

            function startLeaves() {
                if (!leavesAnimationId) {
                    createLeaves();
                    animateLeaves();
                }
            }

            function stopLeaves() {
                if (leavesAnimationId) {
                    cancelAnimationFrame(leavesAnimationId);
                    leavesAnimationId = null;
                    clearLeaves();
                }
            }

            function toggleLeaves() {
                leavesActive = !leavesActive;
                const leavesContainer = document.getElementById('leaves-container');
                leavesContainer.style.visibility = leavesActive ? 'visible' : 'hidden';
                if (leavesActive) {
                    startLeaves();
                } else {
                    stopLeaves();
                }
            }

            function clearLeaves() {
                const leavesContainer = document.getElementById('leaves-container');
                leavesContainer.innerHTML = '';
            }

            // Добавляем стили для анимации падения листьев
            const leavesStyles = `
                @keyframes fall {
                    to {
                        transform: translateY(100vh) rotate(720deg);
                        opacity: 1;
                    }
                }
                .leaf {
                    width: 35px;
                    height: 35px;
                    position: absolute;
                    background: url('https://i.ibb.co/L00m47b/zyjs9l.png');
                    background-size: 100% 100%;
                    opacity: 0;
                }
            `;
            const leavesStyleSheet = document.createElement('style');
            leavesStyleSheet.type = 'text/css';
            leavesStyleSheet.innerText = leavesStyles;
            document.head.appendChild(leavesStyleSheet);
            </script>