HTML, CSS 및 JavaScript로 사용자 지정 마우스 포인터 만들기 👆

6843 단어 htmljavascriptcsstutorial
이 자습서에서는 표준 마우스 포인터를 클릭할 때 스타일이 변경되는 멋진 그림 이모티콘으로 변환하는 방법을 살펴보겠습니다.

내 에 전체 비디오 자습서를 게시하고 거기에서 볼 수 있습니다.

그 말로 코딩을 시작합시다!

우리가 만들 것





이 세 파일을 생성하여 시작하십시오. index.html , styles.css 및 script.js .

HTML 구조



표준 HTML 상용구 코드를 만듭니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Custom Mouse Pointer</title>
    </head>
    <body></body>
</html>


그런 다음 HTML 파일의 <link> 태그에서 styles.css 를 가져옵니다.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
        <title>Custom Mouse Pointer</title>
    </head>
    <body></body>
</html>


HTML 파일 하단에 있는 src 태그의 <script>를 우리의 script.js 파일로 설정하여 JavaScript 파일을 가져옵니다.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
        <title>Custom Mouse Pointer</title>
    </head>
    <body>
        <script src="script.js"></script>
    </body>
</html>


마지막으로 pointer 클래스로 div를 만듭니다. 이 요소는 기본 커서 대신 사용됩니다. 그리고 html 요소이기 때문에 다양한 스타일을 적용할 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
        <title>Custom Mouse Pointer</title>
    </head>
    <body>
        <div class="pointer"></div>
        <script src="script.js"></script>
    </body>
</html>


이것이 HTML 파일의 전부입니다! 브라우저에서 index.html 파일을 열면 빈 페이지가 표시되어야 합니다.

HTML 스타일링



먼저 웹 페이지의 배경을 밝은 자주색으로 설정합니다.

body {
    background: #8499ff;
}


웹 페이지의 높이와 너비를 페이지를 보고 있는 장치의 최대 높이와 ​​너비로 설정합니다.

body {
    ...
    height: 100vh;
    width: 100vw;
}


그런 다음 overflow 속성을 none 로 설정하여 세로 및 가로 스크롤을 방지합니다.

body {
    ...
    overflow: hidden;
}


마지막으로 포인터를 숨깁니다.

body {
    ...
    cursor: none;
}

body에 대해 다음을 가지고 있어야 합니다.

body {
    background: #8499ff;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    cursor: none;
}


이제 pointer 스타일을 지정할 것입니다. 포인터의 스타일을 직접 지정하지 않고 ::after 의사 클래스의 스타일을 지정합니다.
::after 의사 클래스는 선택한 요소 뒤에 오는 콘텐츠를 선택하여 이 자습서에서 수행할 특정 태그 뒤에 텍스트를 삽입할 수 있도록 합니다.

.pointer::after {
    content: "🤩";
    font-size: 40px;
}


위 코드에서 content 속성을 이모티콘(🤩)으로 설정했습니다. 이 이모티콘은 기본 커서 아이콘이 됩니다. 그런 다음 크기를 40px로 늘려 조금 더 크게 만듭니다.

마우스를 (😜)로 클릭할 때마다 기본 이모지를 변경합니다. 이 작업을 수행하기 위해 클래스pointer-clicked가 생성됩니다. 이 클래스는 JavaScript의 포인터에 할당됩니다.

.pointer-clicked::after {
    content: '😜';
}


JavaScript로 기능 추가



먼저 document.querySelector() 메서드를 사용하여 HTML에서 만든 포인터를 선택합니다.

const pointer = document.querySelector(".pointer");


다음 두 가지 마우스 이벤트를 수신해야 합니다.

  • mousemove: 마우스 포인터를 움직일 때

  • mousedown: 마우스 포인터를 클릭/눌렀을 때

    • window.addEventListener("mousemove", onPointerMove);
window.addEventListener("mousedown", onMouseClick);


    이러한 이벤트 리스너에 대한 콜백 함수를 생성해 보겠습니다.

    const onPointerMove = (e) => {
    // on pointer move
}

const onMouseClick = () => {
    // on mouse click
}


    실제 포인터가 움직일 때 우리는 그 위치를 가져와서 HTML에서 만든 포인터 요소로 전달하려고 합니다.

    const onPointerMove = (e) => {
    const mouseY = e.clientY;
    const mouseX = e.clientX;
    pointer.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}

    clientY는 뷰포트에 상대적인 포인터의 수직 좌표를 반환합니다. 반면에 clientX 속성은 가로 좌표를 반환합니다.
    pointer.style.transform 행에서 실제 커서의 좌표를 지정하여 사용자 지정 포인터의 위치를 ​​변경합니다. 똑똑한 움직임! 😊

    마우스 클릭 시 pointer-clicked 라는 새 클래스를 추가합니다. 그런 다음 setTimeout 함수에서 150밀리초 후에 이 새로 생성된 클래스를 제거하여 포인터를 기본 상태로 확인합니다.

    const onMouseClick = () => {
    pointer.classList.add('pointer-clicked')
    setTimeout(() => {
        pointer.classList.remove('pointer-clicked')
    }, 150)
}


    마지막으로 script.js 파일에는 다음이 있어야 합니다.

    const pointer = document.querySelector('.pointer');

const onPointerMove = (e) => {
    const mouseY = e.clientY;
    const mouseX = e.clientX;
    pointer.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}

const onMouseClick = () => {
    pointer.classList.add('pointer-clicked')
    setTimeout(() => {
        pointer.classList.remove('pointer-clicked')
    }, 150)
}

window.addEventListener("mousemove", onPointerMove);
window.addEventListener("mousedown", onMouseClick);


    이제 브라우저에서 index.html를 열면 다음과 같이 표시됩니다!



    코드는 GitHub에서 사용할 수 있습니다.

    결론



    이것이 이 기사의 전부입니다.

    이 기사가 유용하다고 생각되면 저를 팔로우하고 웹 및 소프트웨어 개발 콘텐츠에 대한 주간newsletter에 가입하는 것을 고려하십시오.
    EXCEL VBA에서 워크시트에 CREATE TABLE(ADO)
    기능 재검토(프로토타입 아님) 🤥

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage