web/js/effects.js - master - vladlevin790/cpp-lab-2

web/js/effects.js
145 строк4 KB
vladlevin790
init
05 май 2026, 21:32
05 май 2026, 21:323310cbd
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const isTouchDevice = window.matchMedia("(pointer: coarse)").matches;

function isRecordingOptimized() {
    return document.body.classList.contains("recording-active") ||
        document.body.classList.contains("recording-optimized");
}

export function initParticles() {
    const canvas = document.getElementById("particleCanvas");

    if (!canvas || prefersReducedMotion || window.innerWidth < 960) {
        return;
    }

    const context = canvas.getContext("2d", { alpha: true });
    const state = {
        width: 0,
        height: 0,
        particles: [],
        lastFrame: 0
    };

    function resize() {
        const dpr = Math.min(window.devicePixelRatio || 1, 1);

        state.width = window.innerWidth;
        state.height = window.innerHeight;

        canvas.width = Math.floor(state.width * dpr);
        canvas.height = Math.floor(state.height * dpr);
        canvas.style.width = `${state.width}px`;
        canvas.style.height = `${state.height}px`;

        context.setTransform(dpr, 0, 0, dpr, 0, 0);

        const count = state.width < 1280 ? 8 : 12;

        state.particles = Array.from({ length: count }, (_, index) => {
            return {
                x: Math.random() * state.width,
                y: Math.random() * state.height,
                radius: Math.random() * 1.1 + 0.6,
                vx: (Math.random() - 0.5) * 0.07,
                vy: (Math.random() - 0.5) * 0.07,
                type: index % 3
            };
        });
    }

    function draw(now) {
        requestAnimationFrame(draw);

        if (document.hidden || isRecordingOptimized() || now - state.lastFrame < 110) {
            return;
        }

        state.lastFrame = now;
        context.clearRect(0, 0, state.width, state.height);

        for (const particle of state.particles) {
            particle.x += particle.vx;
            particle.y += particle.vy;

            if (particle.x < -16) particle.x = state.width + 16;
            if (particle.x > state.width + 16) particle.x = -16;
            if (particle.y < -16) particle.y = state.height + 16;
            if (particle.y > state.height + 16) particle.y = -16;

            context.beginPath();
            context.fillStyle = particle.type === 0
                ? "rgba(34, 211, 238, 0.10)"
                : particle.type === 1
                    ? "rgba(52, 211, 153, 0.09)"
                    : "rgba(250, 204, 21, 0.08)";
            context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
            context.fill();
        }
    }

    window.addEventListener("resize", resize);
    resize();
    requestAnimationFrame(draw);
}

export function initRevealAnimations() {
    const blocks = document.querySelectorAll(".reveal-block");

    const observer = new IntersectionObserver((entries) => {
        for (const entry of entries) {
            if (!entry.isIntersecting) {
                continue;
            }

            entry.target.classList.add("is-visible");
            observer.unobserve(entry.target);
        }
    }, {
        threshold: 0.18
    });

    blocks.forEach((block) => observer.observe(block));
}

export function initMagneticButtons() {
    if (isTouchDevice || prefersReducedMotion) {
        return;
    }

    const buttons = document.querySelectorAll(".button, .dock-button, .dock-link");

    buttons.forEach((button) => {
        button.addEventListener("pointermove", (event) => {
            if (isRecordingOptimized()) {
                return;
            }

            const rect = button.getBoundingClientRect();
            const x = event.clientX - rect.left - rect.width / 2;
            const y = event.clientY - rect.top - rect.height / 2;

            button.style.transform = `translate3d(${x * 0.01}px, ${y * 0.01}px, 0)`;
        });

        button.addEventListener("pointerleave", () => {
            button.style.transform = "";
        });
    });
}

export function pulseElement(element) {
    if (!element || prefersReducedMotion || isRecordingOptimized()) {
        return;
    }

    element.classList.add("pulse");

    setTimeout(() => {
        element.classList.remove("pulse");
    }, 300);
}

export function setCinemaMode(enabled) {
    document.body.classList.toggle("cinema-mode", enabled);
}