css포지션을이용 하여 마우스 이벤트 제어
<body>
<div class="cursor"></div>
</body>
body{background: #fff;}
.cursor{width: 50px; height: 50px; position: absolute;; transform: translate(-50%, -50%);
z-index: -1; background: #1ce6BA; border-radius: 50%; mix-blend-mode:darken;
transition: transform .3s; pointer-events: none;}
.cursor.on{transform: translate(-50%, -50%) scale(2);}
$(function(){
let cursor=$(".cursor");
/* e가 왜들어가는지 아직 모르겟지만 넣으라고 해서 넣음 */
$(window).mousemove(function(e){
let x=e.pageX;
let y=e.pageY;
cursor.css("left",x)
.css("top",y);
});
$("window").scroll(function(e){
let x=e.pageX;
let y=e.pageY;
cursor.css("left",x)
.css("top",y)
});
$("a, .cursor_hover").mouseenter(function(){
cursor.addClass("on")
})
//a링크가 아닌 하버이펙트가 필요한 태그에 cursor_hover클래스 추가할 것
$("a, .cursor_hover").mouseleave(function(){
cursor.removeClass("on")
})
/*
귀찮지만 엔터와 리브를 구분해서 쓴 이유는
hover와 toggleClass로 구현햇을때
on인상태에서 페이지가 넘어가면 기본이 on인 상태가 되어버려서
이를 막고자 엔터와 리브를 각각 구현함
*/
});
.cursor에 포지션과 point-events
→포인터이벤트를 이용하여 a링크에 지장이 없도록 구현
→mix-blend-mode에서 투명인 배경과 흰색의 배경에서의 구현되는 색상이 다르므로 body에 fff깔고 darken추천
See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen.
'js' 카테고리의 다른 글
| [js]스크롤하는만큼 내려오는 선-프로그래스바 같은 (0) | 2022.01.20 |
|---|---|
| [js, php]텍스트 대치 / 일부 텍스트 변경 / text relpace (0) | 2022.01.10 |
| [js]스크롤 이동 메뉴 이펙트 (0) | 2021.12.29 |
| [js]메인슬라이드 랜덤 출력 (0) | 2021.12.29 |
| [js]스크롤바 이동 버튼 (0) | 2021.12.17 |