https://bexco.co.kr/resources/homepage/kor/_Js/MouseCursor.js

1const cursor = document.querySelector('#MouseCursor');
2const cursorTxt = document.querySelector('#MouseCursorTxt');
3const cursorCircle = cursor.querySelector('.cursor__circle');
4
5const mouse = { x: -100, y: -100 }; // mouse pointer's coordinates
6const pos = { x: 0, y: 0 }; // cursor's coordinates
7const speed = 0.1; // between 0 and 1
8
9const updateCoordinates = e => {
10  mouse.x = e.clientX;
11  mouse.y = e.clientY;
12}
13
14window.addEventListener('mousemove', updateCoordinates);
15
16
17function getAngle(diffX, diffY) {
18  return Math.atan2(diffY, diffX) * 180 / Math.PI;
19}
20
21function getSqueeze(diffX, diffY) {
22  const distance = Math.sqrt(
23    Math.pow(diffX, 2) + Math.pow(diffY, 2)
24  );
25  const maxSqueeze = 0.15;
26  const accelerator = 1500;
27  return Math.min(distance / accelerator, maxSqueeze);
28}
29
30
31const updateCursor = () => {
32  const diffX = Math.round(mouse.x - pos.x);
33  const diffY = Math.round(mouse.y - pos.y);
34  
35  pos.x += diffX * speed;
36  pos.y += diffY * speed;
37  
38  const angle = getAngle(diffX, diffY);
39  const squeeze = getSqueeze(diffX, diffY);
40  
41  const scale = 'scale(' + (1 + squeeze) + ', ' + (1 - squeeze) +')';
42  const rotate = 'rotate(' + angle +'deg)';
43  const translate = 'translate3d(' + pos.x + 'px ,' + pos.y + 'px, 0)';
44
45  cursor.style.transform = translate;
46  cursorTxt.style.transform = translate;
47  cursorCircle.style.transform = rotate + scale;
48};
49
50function loop() {
51  updateCursor();
52  requestAnimationFrame(loop);
53}
54
55requestAnimationFrame(loop);
56
57
58
59const cursorModifiers = document.querySelectorAll('[cursor-class]');
60
61cursorModifiers.forEach(curosrModifier => {
62  curosrModifier.addEventListener('mouseenter', function() {
63    const className = this.getAttribute('cursor-class');
64    cursor.classList.add(className);
65    cursorTxt.classList.add(className);
66  });
67  
68  curosrModifier.addEventListener('mouseleave', function() {
69    const className = this.getAttribute('cursor-class');
70    cursor.classList.remove(className);
71    cursorTxt.classList.remove(className);
72  });
73});