script.js - master - inemusic/music

script.js
71 строка3 KB
inemusic
upload files
15 фев 2025, 20:56
15 фев 2025, 20:562ac5032
document.addEventListener("mousemove", (event) => {
    const x = (event.clientX / window.innerWidth - 0.5) * 10;
    const y = (event.clientY / window.innerHeight - 0.5) * 10;

    document.querySelector(".container").style.transform = 'translate(${x}px, ${y}px)';
});

document.addEventListener("DOMContentLoaded", () => {
    const bloodContainer = document.querySelector(".blood-container");

    function createBloodDrop() {
        for (let i = 0; i < 5; i++) { // Создаём сразу 5 капель
            const drop = document.createElement("div");
            drop.classList.add("blood-drop");

            // Случайные параметры капли
            drop.style.left = Math.random() * 100 + "vw"; // Рандомная ширина
            drop.style.animationDuration = (Math.random() * 3 + 1.5) + "s"; // Скорость
            drop.style.width = Math.random() * 10 + 3 + "px"; // Размер
            drop.style.height = Math.random() * 30 + 10 + "px"; // Длина
            drop.style.borderRadius = "50% 50% 60% 40%"; // Каплеобразная форма
            drop.style.setProperty("--drift", Math.random() * 2 - 1); // Добавляем небольшой дрейф по X

            drop.style.animation = "fall linear forwards";
            bloodContainer.appendChild(drop);

            // Удаление капель после падения
            setTimeout(() => drop.remove(), 4000);
        }
    }

    // Каждые 100 мс генерируем 5 капель
    setInterval(createBloodDrop, 100);
});
const bloodContainer = document.createElement("div");
bloodContainer.style.position = "fixed";
bloodContainer.style.top = "0";
bloodContainer.style.left = "0";
bloodContainer.style.width = "100%";
bloodContainer.style.height = "100%";
bloodContainer.style.zIndex = "-1";
document.body.appendChild(bloodContainer);

function createBloodDrop() {
    const drop = document.createElement("div");
    drop.style.position = "absolute";
    drop.style.width = Math.random() * 6 + 4 + "px";
    drop.style.height = Math.random() * 20 + 10 + "px";
    drop.style.background = "rgba(139, 0, 0, 0.7)";
    drop.style.borderRadius = "50%";
    drop.style.left = Math.random() * 100 + "vw";
    drop.style.top = "-10px";
    drop.style.opacity = "0.7";
    drop.style.animation = "fall " + (Math.random() * 3 + 2) + "s linear infinite";

    bloodContainer.appendChild(drop);

    setTimeout(() => drop.remove(), 5000);
}

setInterval(createBloodDrop, 500);

const style = document.createElement("style");
style.innerHTML = `
    @keyframes fall {
        0% { transform: translateY(-10px) scaleX(0.8); opacity: 0; }
        20% { opacity: 0.7; }
        100% { transform: translateY(100vh) scaleX(1); opacity: 0; }
    }
`;
document.head.appendChild(style);