728x90
Mouse Effect 만들기
다음 프레임과 같이 구역별로 마우스 커서에 이벤트효과를 넣어서 만들어 보겠습니다.
코드블럭
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마우스이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.mouse__text p {
font-size: 3vw;
line-height: 1.9;
}
.mouse__text p:last-child {
font-size: 3vw;
}
.mouse__text p span {
color: aquamarine;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
z-index: 9999;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
user-select: none;
pointer-events: none;
}
.mouse__cursor2 {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
z-index: 9998;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}
.mouse__cursor.active {
transform: scale(0);
}
.mouse__cursor2.active {
transform: scale(5);
background-color: rgba(255, 166, 0, 0.6);
}
.mouse__cursor.active2 {
transform: scale(0);
}
.mouse__cursor2.active2 {
transform: scale(3);
background-color: rgba(97, 219, 223, 0.6);
}
.mouse__cursor.active3 {
transform: scale(0);
}
.mouse__cursor2.active3 {
transform: scale(4);
background-color: rgba(184, 129, 232, 0.6);
}
</style>
</head>
<body class="img02 bg02 font02">
<header id="header">
<h1>Javascript Mouse Effect01</h1>
<p>마우스 이펙트 - 마우스 따라다니기</p>
<ul>
<li><a href="mouseEffect01.html">1</a></li>
<li class="active"><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">3</a></li>
<li><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
<li><a href="mouseEffect06.html">6</a></li>
</ul>
</header>
<!--header -->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__cursor2"></div>
<div class="mouse__text">
<p>Don't let yesterday <span class="s1">take up too much</span> of today.</p>
<p>어제가 오늘을 <span class="s4">너무 많이 차지</span>하게 하지 마세요.</p>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:lee3ll@naver.com">lee3ll@naver.com</a>
</footer>
<!--footer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
//선택자
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
const cursor3 = document.querySelector(".mouse__cursor2");
const cursor4 = document.querySelector(".mouse__cursor2");
//커서 좌푯값 할당
window.addEventListener("mousemove", e => {
cursor.style.left = e.pageX + "px";
cursor.style.top = e.pageY + "px";
cursor2.style.left = e.pageX + "px";
cursor2.style.top = e.pageY + "px";
document.querySelectorAll(".mouse__text span").forEach(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active");
cursor2.classList.add("active");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
document.querySelectorAll("#header li").forEach(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active2");
cursor2.classList.add("active2");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active2");
cursor2.classList.remove("active2");
});
});
document.querySelectorAll("footer").forEach(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active3");
cursor2.classList.add("active3");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active3");
cursor2.classList.remove("active3");
});
});
});
</script>
</body>
</html>보충설명
🎈마우스 커서효과의 움직임을 더 부드럽게 해주기 위해 GSAP를 사용하였습니다.
GSAP는 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리 입니다.
CSS로 애니메이션 효과를 만들어 주었지만 보다 복잡한 애니메이션과 매끄러운 퍼포먼스를 구현하기 위해서 GSAP를 도구로 사용합니다.
🎈커서에 좌푯값을 할당하여 커서가 움직이는대로 마우스효과가 따라오게 만듭니다.
(좌푯값 설정 설명☞ https://lee3ll.tistory.com/47 )
🎈 선택자를 만들고 forEach문을 만들어 커서효과를 더해줍니다.
document.querySelectorAll(".mouse__text span").forEach(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active");
cursor2.classList.add("active");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
document.querySelectorAll("#header li").forEach(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active2");
cursor2.classList.add("active2");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active2");
cursor2.classList.remove("active2");
});
});
document.querySelectorAll("footer").forEach(span => {
span.addEventListener("mouseenter", () => {
cursor.classList.add("active3");
cursor2.classList.add("active3");
});
span.addEventListener("mouseleave", () => {
cursor.classList.remove("active3");
cursor2.classList.remove("active3");
});
});MouseEffect
| Mouseover | 마우스 커서가 요소 위로 이동할 때 발생. |
| Mouseout | 마우스 커서가 요소에서 벗어날 때 발생. |
| Mouseenter | 마우스 커서가 요소 위에 있을 때 발생. |
| Mouseleave | 마우스 커서가 요소에서 벗어났을 때 발생. |
| Mousedown | 마우스 버튼을 누르는 순간 발생. |
| Mouseup | 마우스 버튼을 눌렀다 놓는 순간 발생. |
| Mousemove | 마우스 커서가 요소 내에서 이동할 때 발생. |