-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
안녕하세요 질문 남깁니다.
20.11.04 21:24 작성 조회수 129
0
개인 포트폴리오를 만들 때 해당 기능을 구현해보려고 시도했습니다. 동작이 잘 되는데 이상하게 스크롤을 내린 후cursorPointer가 제가 스크롤을 내리기 전 위치에서 커서를 따라오지 않고 있더라구요 코드에 이상이 있는걸까요? 확인해주시면 감사하겠습니다!
let cursorPointer;
let x = 0;
let y = 0;
let mx = 0;
let my = 0;
let speed = 0.1;
window.onload = function () {
cursorPointer = document.getElementsByClassName("cursor-pointer")[0];
window.addEventListener("mousemove", mouseFunc);
function mouseFunc(e) {
x = e.clientX;
y = e.clientY;
}
loop();
}
function loop() {
mx += (x - mx) * speed;
my += (y - my) * speed;
cursorPointer.style.transform = "translate("+ mx +"px,"+ my +"px)";
window.requestAnimationFrame(loop);
}
// css
.cursor-pointer {
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 0px;
border-radius: 50%;
background-color : rgba(211, 17, 69,0.6);
}
답변을 작성해보세요.
1
코딩일레븐
지식공유자2020.11.05
안녕하세요 답변이 늦었네요.
소스는 문제 없어보이는데요, html 상에서 cursor-pointer 가 어디에 위치해 있나요?
상위 div에 상속이 되어 있어서 그런 것 같아요.
커서포인터를 최상위로 빼던가 position : fixed; 로 바꿔서 해보세요.
안되시면 바로 다시 문의주세요~
0
0
답변 3