마우스 커서 디자인 효과 도대체 어떻게 하는걸까요?
본문
이 사이트에서 나타나는 마우스 커서 효과는 도대체 어떤 소스를 사용하는 걸까요 ㅜㅜ?
너무 사용해보고 싶네요.
일반적인 원형 형태로 있다가, 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;}
적용해 보았는데 ㅜㅜ 스크롤 내려갈때 같이 내려가는데 이거는 어떻게 안될까요..?
답변을 작성하시기 전에 로그인 해주세요.
