커서 사용자 지정

반응형

시작하기 전에 몇 가지 문맥을 알려드리겠습니다.

우리 모두가 사용하는 전형적인 커서의 커스터마이즈에 영감을 받았습니다. 구글링, 조사, 비디오 시청을 했지만 아무런 가치도 찾을 수 없었다.

자, 여기 여러분만의 멋진 커서를 만드는 것에 대한 기사가 있습니다.

이것이 오늘 우리가 짓고 있는 것입니다.

사용자 정의 커서 - 비디오 보기

 

시작해보자:

개요는 다음과 같습니다.

• 위에 보이는 화려한 커서는 반지처럼 보이게 스타일링된 2개의 디브일 뿐이다.
• 원래 커서의 위치를 추적합니다.
• 원래 커서의 위치에 따라 사용자 정의된 커서를 이동합니다.
• 그리고 마지막으로 원래의 커서를 숨깁니다.

네, 그렇게 간단합니다.

CustomCursor 구성 요소:

 

리버스 엔지니어링.

다음과 같은 방식으로 app.js에서 CustomCursor 구성 요소를 가져옵니다.

import "./App.css";
import CustomCursor from "./components/customCursor";

function App() {
    return (
          <div className="App">
            <CustomCursor />
      {/* Rest of your code */}
    </div>
  );
}

export default App;

이제 부품을 제작해 봅시다.

위치 추적:

먼저 원래 커서의 위치 *를 추적해야 하므로 * 위치 추적에 대한 사용자 지정 커서를 대체할 것입니다.

 

• 마우스이동 이벤트 수신기를 사용하여 x 잡기
• useState를 사용하여 상태 변수에 저장합니다. 여기 우리는 그것을 포지션으로 명명하고 있습니다.

const [position, setPosition] = useState({ x: 0, y: 0 });

 useEffect(() => {
    document.addEventListener("mousemove", (event) => {
            const { clientX, clientY } = event;
            setPosition({ x: clientX, y: clientY });
    })
 })

클라이언트X

팁: 좌표에 액세스할 수 있는지 확인하려면 console.log

기본 사용자 지정 커서 작성:

 

• div(나중에 원하는 스타일 지정)를 만듭니다.
• 위치 상태 변수를 사용하여 변위합니다(위의 이벤트 수신기에서 추출).
  div를 이동하려면 top을 사용합니다.
• div를 이동하려면 top을 사용합니다.
• 위치:고정하면 일반 문서 흐름에서 div가 제거됩니다.

<div style={ left: position.x, top: position.y, position:fixed}>
    Cursor
</div>

조각을 함께 맞추면 다음과 같은 커서를 얻을 수 있습니다

기본 사용자 지정 커서 - 비디오 보기

좋은 진전이 있네요. 걔속해서 갑시다.

 

사용자 정의 커서 스타일 지정:

우리 커서를 예쁘게 꾸며야 할 시간이에요. 당신의 모든 창의력을 발휘하여 멋진 커서를 디자인하세요.

그냥 반지처럼 보이도록 디브 스타일링만 할게요.

jsx는 이렇게 생겼습니다.

<div className="cursor ring" style={ left: position.x, top: position.y } />
  <div className="cursor dot" style={ left: position.x, top: position.y } />
    ```

    <div class="content-ad"></div>

    여기 CSS 스타일링이 있습니다.

    ```js
    .cursor {
      position: fixed;
      }

      .ring {
        width: 22px;
          height: 22px;
            border: 2px solid rgba(165, 160, 160, 0.808);
              border-radius: 100%;
                transform: translate(-50%, -50%);
                  -webkit-transition-duration: 100ms;
                    transition-duration: 100ms;
                      -webkit-transition-timing-function: ease-out;
                        transition-timing-function: ease-out;
                          will-change: width, height, transform, border;
                            z-index: 999;
                            }

                            .dot {
                              width: 8px;
                                height: 8px;
                                  background-color: rgb(100, 94, 94);
                                    border-radius: 100%;
                                      transform: translate(-50%, -50%);
                                        z-index: 999;
                                          pointer-events: none;
                                            transition-duration: 10ms;
                                              -webkit-transform: translate(-50%, -50%);
                                                -moz-transform: translate(-50%, -50%);
                                                  -ms-transform: translate(-50%, -50%);
                                                    -o-transform: translate(-50%, -50%);
                                                    }
                                                    ```

                                                    여기 있었네! 오리지널 커서에 이어 아름다운 커서가 있습니다.

                                                    사용자 정의 커서

                                                    ### 원본 커서 숨기기

                                                    <div class="content-ad"></div>

                                                    거의 다 됐어요.

                                                    원래 커서만 숨기면 돼요.

                                                    그것은 꽤 간단하다. 이렇게 하는 거야.

                                                    ```js
                                                    html {
                                                      cursor: none;
                                                      }
                                                      ```

                                                      그게 다야! 끝났어요.

                                                      이제 부드러운 전환과 함께 아름답게 맞춤화된 커서가 보입니다.

                                                      최종 커서 - 비디오 보기

                                                      <div class="content-ad"></div>

                                                      여기 모두 코드가 있습니다.

                                                      ```js
                                                      function CustomCursor() {
                                                        const [position, setPosition] = useState({ x: 0, y: 0 });

                                                          useEffect(() => {
                                                              document.addEventListener("mousemove", (event) => {
                                                                    const { clientX, clientY } = event;
                                                                          setPosition({ x: clientX, y: clientY });
                                                                              });
                                                                                }, []);

                                                                                  return (
                                                                                    <>
                                                                                      <div className="cursor ring" style={ left: position.x, top: position.y }/>
                                                                                        <div className="cursor dot" style={ left: position.x, top: position.y }/>
                                                                                          </>
                                                                                            );
                                                                                            }
                                                                                            ```

                                                                                            이걸 가치있게 찾았길 바래

                                                                                            내 친구 유딧에게 보낸 큰 소리, 그의 포트폴리오에 있는 커서가 내가 그것을 만들도록 영감을 주었다.

                                                                                            PS: 여기서 그치지 마세요, 여러분도 이제 아시겠지만, 멋진 커서를 디자인하기 위해 여러분의 창의력을 최대한 활용하세요.

                                                                                            팁: 마우스를 클릭하여 애니메이션을 추가해 보십시오.

                                                                                            오늘은 여기까지 하겠습니다. 댓글창에 당신의 생각을 알려주세요.

                                                                                            그 기사가 마음에 드셨다면 엄지손가락을 치켜세우세요.

                                                                                            <div class="content-ad"></div>

                                                                                            즐거우셨기를 바라며, 즐거우셨다면 에 대한 지원을 고려해 주십시오. 그것은 나의 하루를 만들 것이다 :)

                                                                                            %[https://www.buymeacoffee.com/sayurikamble]