function magicMouse(e) { // Parameter festlegen e = e || {}; e.outerWidth = e.outerWidth || 30; e.outerHeight = e.outerHeight || 30; e.cursorOuter = e.cursorOuter || "circle-basic"; e.hoverEffect = e.hoverEffect || "circle-move"; e.hoverItemMove = e.hoverItemMove || false; e.defaultCursor = e.defaultCursor || false; // Überprüfe, ob der Cursor bereits erstellt wurde if (!document.getElementById("magicMouseCursor")) { const cursorOuter = document.createElement("div"); cursorOuter.setAttribute("id", "magicMouseCursor"); document.body.appendChild(cursorOuter); cursorOuter.style.width = e.outerWidth + "px"; cursorOuter.style.height = e.outerHeight + "px"; cursorOuter.style.position = "fixed"; cursorOuter.style.pointerEvents = "none"; // Setze den Cursor in die Mitte des Bildschirms const initialX = (window.innerWidth / 2) - (e.outerWidth / 2); const initialY = (window.innerHeight / 2) - (e.outerHeight / 2); cursorOuter.style.transform = `translate(${initialX}px, ${initialY}px)`; } // Standardcursor ausblenden if (!e.defaultCursor) { document.body.style.cursor = "none"; // Standardcursor ausblenden } let l = 0, m = 0; // Mousemove Event Listener document.addEventListener("mousemove", function (event) { l = event.clientX; m = event.clientY; const cursorOuter = document.getElementById("magicMouseCursor"); if (cursorOuter) { const u = l - (e.outerWidth / 2); const d = m - (e.outerHeight / 2); cursorOuter.style.transform = `translate(${u}px, ${d}px)`; } }); // Hover-Elemente document.querySelectorAll(".magic-hover").forEach((el) => { el.addEventListener("mouseenter", () => { const cursorOuter = document.getElementById("magicMouseCursor"); if (cursorOuter) { let rect = el.getBoundingClientRect(); const u = rect.left; const d = rect.top; cursorOuter.classList.add("is-hover"); cursorOuter.style.transform = `translate(${u}px, ${d}px)`; } }); el.addEventListener("mouseleave", () => { const cursorOuter = document.getElementById("magicMouseCursor"); if (cursorOuter) { cursorOuter.classList.remove("is-hover"); } }); }); } // Initialisiere den Cursor, wenn das DOM vollständig geladen ist document.addEventListener("DOMContentLoaded", () => { const options = { "cursorOuter": "circle-basic", "hoverEffect": "circle-move", "hoverItemMove": false, "defaultCursor": false, "outerWidth": 41, "outerHeight": 41 }; magicMouse(options); });