섹션 1에 사용자 정의 커서를 만드는 방법

참고: 이 코드를 작성할 때 모듈이 사용되지 않았습니다.😆
만약 당신이 원본 코드를 찾고 있다면, 그것은 영상에서 찾을 수 있다😉
지원되는 비디오를 보십시오.😢

기본 HTML - 커서의 CSS 레이아웃

커서 및 커서 아웃라인에 대한 JSX(HTML)를 작성하는 것부터 시작합니다.

이 요소들을 위해 나중에 DOM 요소에 접근할 수 있도록 ref을 만들었습니다.
그런 다음 이러한 요소에 CSS 스타일을 추가합니다.

기본 커서를 숨기려고 하기 때문에 cursor: none이 일반 선택기 *에 추가되었습니다.pointer-events: none은 이 요소가 포인터 이벤트의 목표가 되지 않도록 합니다.MDN pointer-events

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

이 코드 세그먼트는 중간에 있는 두 요소를 이동하는 데 사용됩니다.
나중에 opacity: 1; 및 mouseenter 이벤트에 따라 커서를 숨기고 표시할 수 있도록 mouseleave 을 사용하십시오.이것이 바로 transition도 opacity의 속성에 사용되는 원인이다.transform의 Transition을 사용하면 일부 마우스 이벤트에 따라 점과 윤곽의 크기를 증가하고 줄일 수 있다(어느 것인지 곧 알 수 있다)😉).
이렇게 보여요.

커서 롤오버 효과를 표시하는 이미지 추가

부드러운 커서 스텝 전환을 표시하기 위해 그림을 추가할 것입니다.

그림% 1개의 캡션을 편집했습니다.
이제 <Link /> 구성 요소를 가져와 이미지를 전달해야 합니다.

우리는 마우스 이벤트를 모든 그림에 추가하기 때문에 <Cursor />을 용기에 추가할 것입니다.ref은util 함수입니다. 맵 함수에서 제공하는 색인 값에 따라 그림을 얻기 위해 만들었습니다.원본 코드에서 이 함수를 찾을 수 있습니다. (그림이 그렇게 중요하지 않기 때문입니다. 죄송합니다. getImage 함수!😥).
가산점🤩

가져오기 문의 경로

그것을 사용하기 위해서 나는 getImage을 사용했다.프로젝트의 루트 디렉터리에 이 파일을 추가하고 jsconfig.json에 baseUrl 속성을 추가할 수 있습니다.

compilerOptions 코드 세그먼트

[...Array(4).keys()]은 4 크기의 빈 그룹을 만들 것입니다.Array(4) 방법은 새 그룹 교체기 대상을 되돌려줍니다. 이 대상은 그룹의 모든 인덱스 키를 포함합니다.
분산 어레이는 단일 어레이-keys()그래, 우리가 하고 있는 일로 돌아가자.😅.
마지막 일은 우리의 이미지 용기에 스타일을 추가하는 것입니다.

이제 최종 결과는 이렇다-

커서에 애니메이션 추가하기

마지막으로 커서에 애니메이션을 추가할 때가 되었습니다. (불쌍한 커서가 화면 중앙에 홀로 앉아 있습니다.)😥).
ref 변수 추가
변경 사항을 업데이트하기 위해 커서 구성 요소에 [0, 1, 2, 3]을 더 추가해야 합니다.

지연은 커서 윤곽선이 커서 점을 따르는 속도를 바꾸는 요소로 사용될 것이다.숫자가 클수록 속도가 느리고, 반대로도 마찬가지다.
cursorVisible은 커서의 가시성을 전환하는 데 도움이 됩니다.
CursorEnabled는 커서의 크기를 전환하는 데 도움이 됩니다.
endX는 커서 점의 X 위치입니다.우리는 이 변수에 점의 X 위치를 저장할 것이다.그것의 자모는 refs인데, 왜냐하면 그것은 X축의 중간에 있기 때문이다.
endY는 커서 점의 Y 위치입니다.이 변수에 점의 Y 위치를 저장합니다.이 개념은 endX와 같다.
x는 커서 프로파일의 x 위치입니다.우리는 이 변수에 윤곽선의 X 위치를 저장할 것이다.동작 애니메이션을 표시하려고 하기 때문에 0으로 초기화됩니다.(화면 왼쪽 상단에서 응용 프로그램이 시작될 때 점이 있는 중점의 컨투어까지)
y는 커서 프로파일의 y 위치입니다.이 변수에 컨투어의 Y 위치를 저장합니다.이 개념은 x와 같다.
requestRef는 주요 함수에서 반환된 ID를 저장합니다(커서 컨투어에 애니메이션을 추가하면 표시됨).
커서 전환 기능 추가

toggleCursorVisibility - 커서가 표시되면 불투명도를 1로 변경하고 그렇지 않으면 0으로 변경합니다.

toggleCursorSize - cursorEnlarged가 진짜라면 우리는 원점의 크기를 줄이고 윤곽의 크기를 증가시킬 것이다.오류가 발생하면 원래 크기로 변경합니다.

over, out, enter, leave 마우스 이벤트 추가

"mouseover"- 커서가 요소나 하위 요소의 맨 위에 있을 때mouseover 이벤트를 터치합니다.
"mouseout"- 커서가 요소나 하위 요소의 맨 위에 있지 않을 때mouseout 이벤트를 터치합니다.
"mouseleave"- 페이지 뷰포트를 벗어나면 mouseleave 이벤트가 트리거됩니다.
"mouseenter"- 페이지 뷰포트에 들어갈 때 mouseenter 이벤트를 트리거합니다.
이제 모우스 오버 이벤트와 모우스 아웃 이벤트를 이미지 구성 요소에 전달할 수 있습니다.

이러한 함수는 마우스 커서가 이미지 위에 있을 때마다 호출됩니다.
mousemove 이벤트 추가

커서가 보이는지 확인해야 합니다. 커서가currentVisible을 업데이트하고toggleCursorVisibility 함수를 호출한 이유입니다.
그리고 페이지X와 페이지Y의 도움말 아래 커서의 현재 위치를 가져옵니다.다음 단계는 페이지에서 이동하는 것을 표시하기 위해 점 커서의 top와left 속성을 업데이트합니다.
부언 - 이 StackOverflow의 답은clientX와 페이지X의 차이를 잘 설명한다.
커서 프로파일 애니메이션 추가하기

이것은 특수한 귀속 함수입니다. 우리는 window.innerWidth/2 함수에서 그것을 호출합니다.이 함수에서 커서 윤곽선이 커서 점과 상대적인 위치를 업데이트합니다.
본문의 두 번째 부분에서 수학 해석을 제시하였다.
이 article은 Request Animation Frame의 작업 원리와 생성 원인을 이해하는 데 매우 유용하다.
모든 이벤트 함수 호출

우리는 requestAnimationFrame (componentDidMount) 의 모든 이벤트 함수를 호출할 수 있습니다.마운트 해제할 때, 모든 이벤트 탐지기를 삭제하고, cancelAnimationFrame 함수를 사용하여 RequestAnimationFrame를 취소해야 합니다.
이러한 기능이 있으니, 우리의 불쌍한 커서가 마침내 이동할 수 있게 되었다.🥳

문장의 Part 2에는 약간의 수학 해석이 있다.만약 네가 원한다면 네가 가서 보아도 된다.
그 중 몇 가지 중요한 부분:
MDN requestAnimationFrame-https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
requestAnimationFrame의 StackOverflow 응답 - https://stackoverflow.com/questions/52212703/using-requestanimationframe-in-react/52213728
React-https://css-tricks.com/using-requestanimationframe-with-react-hooks/에서 RequestAnimationFrame 사용
React-https://www.pluralsight.com/guides/event-listeners-in-react-components에서 이벤트 탐지기 사용
커서를 사용자 정의하는 VanillaJS 코드 펜 - https://codepen.io/kjbrum/pen/qooQJJ