마우스 커서 div박스로 만들기

cousor옵션을 사용하는 것이 아닌 div박스를 통해서 커서를 만들어보자.

 

1. x, y축 데이터 가져오기

const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  
const handleMouseMove = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    setMousePosition({
        x: event.clientX,
        y: event.clientY,
    });
};

  return (
    <ContainerS onMouseMove={handleMouseMove}>
      <HomeCursor>willacreative.com</HomeCursor>
    </ContainerS>
  );
};

1. useState를 사용해서 x축과 y축 데이터를 담아줄 state를 만들어준다.
2. handleMouseMove함수를 만들어 event.clientX와 event.clientY를 이용하여 커서의 위치를 state에 담아준다.
3. onMouseMove를 통해서 커서가 이동할 때마다 handleMouseMove함수를 실행하도록한다. 

 

2. x,y축 데이터 사용하기

... 생략
return (
    <ContainerS onMouseMove={handleMouseMove}>
      <HomeCursor mousePosition={mousePosition}>willacreative.com</HomeCursor>
    </ContainerS>
  );
}
  
const HomeCursor = styled.div<{ mousePosition: { x: number; y: number } }>`
  position: absolute;
  left: ${(props) => `${props.mousePosition.x - 141}px`};
  top: ${(props) => `${props.mousePosition.y}px`};
  opacity: 1;
  white-space: nowrap;
  text-transform: uppercase;
  mix-blend-mode: difference;
  font-size: 32px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: -0.64px;
  color: #fff;
  z-index: 999;
  pointer-events: none;
`;

 

position: absolute;

부모의 요소를 기준으로 위치가 설정된다.

 

left: ${(props) => `${props.mousePosition.x - 141}px`}; 

x축을 데이터를 가져와서 141px를 뺀값으로 커서 위치에 정한다.

141px을 뺀 이유는 div박스의 중앙이 커서의 위치가 되도록 하기 위해서다.

빨간점이 커서위치이다.

top: ${(props) => `${props.mousePosition.y}px`};

y축을 데이터를 가져와서 커서 위치에 정한다.

 

mix-blend-mode: difference;

상위 요소와 색 반전되도록 한다.

 

pointer-events: none;

포인터가 없도록한다.

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events