Cursor follows mouse / 마우스 마그네틱 효과 / 마우스 호버 텍스트 변경

Inspired by minhpham.design

마우스 따라다니는 커서,  텍스트에 마우스가 호버할때 커서가 커지게 하는거나
마그네틱 효과 (마우스를 오브젝트에 가져가면 자석에 붙듯이 딸려오는 효과) 구현하는거나 어렵지는 않은데요.
문제는 레퍼런스 사이트를 보면, 커서가 커지면서 커서안의 텍스트가 변경됩니다.
이게 구현이 까다로와서 조금 고생했네요.

Idea 1. 마스크에 변수 주기

.orange {
--x: 0px; 
--y: 0px;
--size: 40px;  
mask-image: url('your-mask.svg');
mask-repeat: no-repeat;
-webkit-mask-position: var(--x) var(--y); 
mask-position: var(--x) var(--y);
}

x : x좌표 / y : y좌표 / z : 크기
마우스가 이동하면 마스크가 해당위치로 이동
마치 커서가 마우스를 따라가는것 같은 효과

Idea 2. GSAP 마우스 위치에 맞춰 x, y 위치 변경

아래는 코드 예입니다.

$(document).on("mousemove", function(e) {
  const mouseX = e.clientX;
  const mouseY = e.clientY;

  gsap.to('.orange', {
    '--x': `${mouseX}px`,
    '--y': `${mouseY}px`,
    duration: 0.5,
    ease: "power3.out"
  });
});

x, y 위치 마우스 위치에 맞춰 변경되게 하고,
호버하면 사이즈 커지게

가장 중요한 핵심은 텍스트 A와 B가 두개가 겹쳐지게 위치해야합니다.
마우스가 해당 위치에 가면 커서가 커지면서 커서 안쪽으로 텍스트B가 나오는 원리입니다.
원래 해당 위치에 있는데 커서가 가기까지는 마스크 바깥쪽이니 안보이는거죠. <– 이게 핵심!!!!

Idea 3. 마그네틱 효과

코드펜이나 구글, 유튜브 등에서 magnetic effect 라고 하면 많이 나옵니다.
보시고 따라해보세요.

기본 개념은 요소를 중심으로 정해진 거리만큼 영역을 줍니다.
커서가 거리가 가까워지면 요소가 영역까지 딸려옵니다.
커서가 거리가 멀어지면 요소가 영역에서 튕겨 제위치로 돌아갑니다.

예)

See the Pen
Magnetic Cursor by NikhilLadhani (@nikhil-ladhani-nl)
on CodePen.