마우스 커스텀 관련 문의
본문
안녕하세요 오랜만에 문의드립니다
이 코드가 움직일때 마우스 옆에 동그라미 원이 같이 움직이게 되는건데
너무 뚝뚝 끊겨서 따라와서 움직임에 따라 부드럽게 옆에서 따라오게 할수없을까요?
트랜지션을 거는거 같기도한데....
문제점은 부드럽게 시간차가 안걸리는것과
스크롤을 고정 섹션에서 하는건 상관없는데 스크롤 아래로 내릴때
바로 안따라오고 한참 밑에 있거나 그러네요 ;; ㅠ
코드는 다음과 ㅜ같습니다.
원하는건 다음 홈페이지 처럼 됬으면 합니다
<style>
#doz_body {
position: relative;
}
.pointer {
z-index: 999999;
margin-top: 16px;
margin-left: 16px;
position: absolute;
width: 32px;
height: 32px;
border-radius: 40px;
}
@media screen and (max-width: 1200px) {
.pointer {
display: none !important;
}
}
</style>
<html>
<div class="pointer"></div>
</html>
<script>
var pointSize = $(".pointer").width() / 2;
$("#doz_body").mousemove(function(e) {
$('.pointer').css("top", e.pageY - pointSize);
$('.pointer').css("left", e.pageX - pointSize);
$('.pointer').fadeIn();
}); // Mouse Following
// Basic
$(".btn,input,a,textarea").on("mouseover", function() {
$('.pointer').css({
"width": "68px",
"height": "68px",
"background": "none",
"transition-property": "width,height,background",
"transition-duration": "0.5s"
});
}); // Hover
$(".btn,input,a,textarea").on("mouseout", function() {
$('.pointer').css({
"width": "32px",
"height": "32px",
"background": "rgb(190, 99, 134)",
"transition-property": "width,height,background",
"transition-duration": "0.5s"
});
}); // Mouseout
</script>
답변 1
문제점은 부드럽게 시간차가 안걸리는것과
--> 해당 스크립트 구조로는 트렌지션으로 해결되지 않습니다.
스크롤을 고정 섹션에서 하는건 상관없는데 스크롤 아래로 내릴때
--> mousemove 이벤트가 실행되지 않았기 때문입니다.
전체적으로 소스를 다시 작성해 보시는걸 추천 드립니다.
https://wsss.tistory.com/946
https://wsss.tistory.com/755
- 참고할만한 예제 입니다, 위 2개 예제에서 오브젝트 부분만 원하시는 걸로 변경해서 사용하시면 됩니다.
