(function() {
const section = document.querySelector('#circle-section');
const circles = document.querySelectorAll('.cursor-circle');
if (!section || circles.length === 0) return;
// ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΡΡΠ³Π°
const configs = [
{ speed: 0.08, offsetX: -40, offsetY: -40 }, // circle-1
{ speed: 0.16, offsetX: 0, offsetY: 0 }, // circle-2
{ speed: 0.26, offsetX: 20, offsetY: 20 } // circle-3
];
let mouseX = 0;
let mouseY = 0;
let positions = configs.map(() => ({ x: 0, y: 0 }));
let active = false;
// ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ΅ΠΊΡΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π°
function getSectionRect() {
return section.getBoundingClientRect();
}
// ΠΠ²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ ΠΏΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ
document.addEventListener('mousemove', (e) => {
const rect = getSectionRect();
// ΠΡΠΎΠ²Π΅ΡΡΠ΅ΠΌ, Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π»ΠΈ ΠΊΡΡΡΠΎΡ Π²Π½ΡΡΡΠΈ ΡΠ΅ΠΊΡΠΈΠΈ
if (
e.clientY >= rect.top &&
e.clientY <= rect.bottom &&
e.clientX >= rect.left &&
e.clientX <= rect.right
) {
active = true;
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
circles.forEach(c => c.style.opacity = 1);
} else {
active = false;
circles.forEach(c => c.style.opacity = 0);
}
});
// ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΠΈΠΊΠ»
function animate() {
if (active) {
circles.forEach((circle, index) => {
const cfg = configs[index];
const pos = positions[index];
pos.x += (mouseX - pos.x) * cfg.speed;
pos.y += (mouseY - pos.y) * cfg.speed;
circle.style.transform =
`translate(${pos.x + cfg.offsetX}px, ${pos.y + cfg.offsetY}px)`;
});
}
requestAnimationFrame(animate);
}
// Π‘ΡΠ°ΡΡ
const rect = getSectionRect();
positions = configs.map(() => ({
x: rect.width / 2,
y: rect.height / 2
}));
animate();
})();