[자바스크립트] 마우스 커서따라 움직이는 요소
본문
아래 소스를 적용해서 만들어진 상태인데요.
왜 스크롤을 내리면 스크롤 높이만큼 '마우스를 따라다니는 요소'가 벌어지는 걸까요?
[code]
<!-- 마우스 커서 -->
<div class="cursor_wrap">
<div class="cursor"><span class="circle"></span></div>
</div>
<script>
$(window).on("mousemove", (e) => {
$(".cursor").css({
top: e.pageY + "px",
left: e.pageX + "px"
});
$('a, select, label, input, button, .tabs li').hover(function() {
$('.cursor').addClass('mouse_hover');
}, function(){
$('.cursor').removeClass('mouse_hover');
});
});
/*
마우스 커서
*/
.cursor_wrap {position: absolute; left: 0; top: 0; width: 30px; height: 30px; pointer-events: none; z-index: 10000; }
.cursor_wrap .cursor {position: fixed; }
.cursor_wrap .cursor .circle { display: block; opacity: 0.15; background-color: none; width: 30px; height: 30px; border-radius: 50%; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; transform: translate(-50%, -50%) matrix(1, 0, 0, 1, 0, 0);}
.cursor_wrap .cursor.mouse_hover .circle { background-color: rgb(127, 127, 127); transform: translate(-50%, -50%) matrix(3, 0, 0, 3, 0, 0); }
</script>
[code]
답변 2
스크롤된 값을 빼줘야 하는데 깜빡한 모양이네요
top: (e.pageY - $(window).scrollTop()) + "px",
left: (e.pageX - $(window).scrollLeft()) + "px"
<body style="width: 5000px; height: 5000px;">
<!-- 마우스 커서 -->
<div class="cursor_wrap">
<div class="cursor"><span class="circle"></span></div>
</div>
<script>
$(window).on("mousemove", function(e) {
$(".cursor").css({
top: (e.pageY - $(window).scrollTop()) + "px",
left: (e.pageX - $(window).scrollLeft()) + "px"
});
$('a, select, label, input, button, .tabs li').hover(function() {
$('.cursor').addClass('mouse_hover');
}, function(){
$('.cursor').removeClass('mouse_hover');
});
});
</script>
<style>
.cursor_wrap {position: absolute; left: 0; top: 0; width: 30px; height: 30px; pointer-events: none; z-index: 10000; }
.cursor_wrap .cursor {position: fixed; }
.cursor_wrap .cursor .circle { display: block; opacity: 0.15; background-color: red; width: 30px; height: 30px; border-radius: 50%; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; transform: translate(-50%, -50%) matrix(1, 0, 0, 1, 0, 0);}
.cursor_wrap .cursor.mouse_hover .circle { background-color: rgb(127, 127, 127); transform: translate(-50%, -50%) matrix(3, 0, 0, 3, 0, 0); }
</style>
</body>
당신의 올 한해가 평안하기를 기도드립니다.
갓블레스유.
당신은 최고입니다.
.cursor_wrap .cursor {position: fixed; }
이 부분 때문일까요? 지금 이것만 봐서는 정확히 어떤건지 모르겠네요
