CSS 및 JavaScript를 사용하여 마우스를 가리킬 때 텍스트 색상 반전

원하는 호버 효과를 얻으려면 검은색 커서가 나타나면 CSS 클립 경로의 기능과 JavaScript 이벤트 처리를 결합할 수 있습니다.

이 접근 방식은 두 개의 텍스트 레이어, 즉 기본 텍스트 레이어와 반전된 텍스트 레이어. 반전된 텍스트 레이어는 기본 텍스트 레이어 뒤에 위치하며 텍스트 색상은 흰색으로 설정되어 있습니다.

JavaScript를 사용하여 마우스 움직임을 캡처하고 반전된 텍스트 레이어의 클립 경로를 동적으로 조정합니다. 마우스를 움직이면 반전된 텍스트가 더 많이 표시되도록 클립 경로가 조정되어 기본 텍스트의 색상이 반전되는 듯한 느낌을 줍니다.

핵심 코드 구성 요소에 대한 분석은 다음과 같습니다.

/* Primary Text Layer */
h1 {
  color: #000;
  position: relative;
}

/* Inverted Text Layer */
h1:before {
  position: absolute;
  content: attr(data-text); /* Same text as primary layer */
  color: #fff;
  background: #000;
  clip-path: circle(0 at var(--x, -100%) var(--y, -100%)); /* Dynamic Clip-path */
}

/* Cursor */
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
}

// Event Listener for Mouse Movement
document.body.onmousemove = function(e) {
  // Update cursor position
  cursor.style.left = e.clientX   'px';
  cursor.style.top = e.clientY   'px';

  // Update clip-path of inverted layer based on mouse position
  h1.style.setProperty('--x', (e.clientX - p.top)   'px');
  h1.style.setProperty('--y', (e.clientY - p.left)   'px');
};

예제 코드:

WORK

결과:

'WORK' 텍스트 위로 마우스를 가져가면 검정색 텍스트가 점차 흰색으로 전환됩니다. 마우스 커서가 움직일 때마다.