마우스 커서 디자인 효과 도대체 어떻게 하는걸까요?

마우스 커서 디자인 효과 도대체 어떻게 하는걸까요?

QA

마우스 커서 디자인 효과 도대체 어떻게 하는걸까요?

본문

http://xenuity.com/v3/

 

이 사이트에서 나타나는 마우스 커서 효과는 도대체 어떤 소스를 사용하는 걸까요 ㅜㅜ?

너무 사용해보고 싶네요.

일반적인 원형 형태로 있다가, a링크에 올라가면 형태가 변경되는 정도의 효과만 되어도 좋을 것 같아요.

이 질문에 댓글 쓰기 :

답변 3

마우스가 움직일 때마다 원이 따라오는 효과를 말씀하시는 것 같은데 맞으실까요?


<div class="cursor"></div>

이런식으로 마우스 커서를 따라다닐 박스를 만들어서 CSS를 이용해 원형으로 만들어주시고,


$(window).on("mousemove", (e) => {
    $(".cursor").css({
        top: e.pageY + "px",
        left: e.pageX + "px"
    });
});

mousemove 스크립트 넣어주시면 마우스가 이동할 때마다 .cursor의 박스가 마우스를 따라가게 됩니다.

a태그에서만 다른 모양으로 변하게 하고 싶으시면, a태그 마우스 오버 시에만 .cursor에 클래스를 추가하거나 직접 모양이 바뀌게 하는 등의 스크립트를 사용하실 수 있습니다.

HTML에 div 추가한 후
<div class="cursor"></div>

css에 스타일 추가합니다.
*{cursor: none;}
.cursor {position: fixed;z-index: 100;border: 1px solid #000; width: 0; height: 0; pointer-events: none;}

 

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT