마우스 효과란?
마우스 효과는 마우스를 움직일 때 마우스 포인터가 갖는 효과를 말합니다. 주로 웹사이트나 앱 디자인에 사용되며 마우스 움직임에 반응하는 다양한 효과를 가지고 있습니다.
예를 들어 마우스를 움직이면 배경색이 바뀌고, 이미지가 움직이고, 텍스트가 늘어나거나 줄어듭니다. 이는 사용자의 마우스 조작에 반응하여 화면을 더욱 생동감 있게 해줍니다.
마우스 효과는 CSS, JavaScript 등을 사용하여 웹 개발에서 구현됩니다. 사용자 경험을 향상시키기 위해 다양한 마우스 효과를 적용할 수 있습니다..
마우스 효과(2) 페이지 코드
<!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>02. 마우스 이펙트</title>
<link rel="stylesheet" href="http://seolheeone.m/css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
.body, a {
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: 2.8vw;
line-height: 1.6;
}
.mouse__text p:last-child {
font-size: 3.5vw;
}
.mouse__text p span {
color: rgb(221, 218, 53);
}
.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;
transition: transform 0.3s;
}
.mouse__cursor2 {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
z-index: 9999;
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) rotateX(545deg);
background-color: rgba(255, 166, 0, 0.6);
}
.mouse__cursor.active2 {
transform: scale(0);
}
.mouse__cursor2.active2 {
transform: scale(5) rotateY(360deg);
background-color: rgba(217, 255, 0, 0.6);
}
.mouse__cursor.active3 {
transform: scale(0);
}
.mouse__cursor2.active3 {
transform: scale(5);
background-color: rgba(175, 26, 175, 0.6);
}
</style>
</head>
<body class="img01 bg08 font07">
<header id="header">
<h1><span>Javascript Mouse Effect02</span></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>You can't learn if you don't <span>experience</span></p>
<p><span>경험</span>하지 않으면 배울 수 없다.</p>
</div>
</div>
</main>
<!-- //main -->
이번에는 마우스 효과 1과 달리 최대 3개의 효과를 만들었습니다.
머리글, 본문, 바닥글 부분에 마우스 효과가 적용되었습니다.
스크립트 코드
<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");
// 커서 좌표값 할당
window.addEventListener("mousemove", e => {
// .style.left = e.pageX + "px";
// cursor.style.top = e.pageY + "px";
// cursor2.style.left = e.pageX + "px";
// cursor2.style.top = e.pageY + "px";
// gsap
gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5});
gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top: e.pageY -15});
// // 오버 효과
// document.querySelector(".mouse__text span").addEventListener("mouseenter", () => {
// cursor.classList.add("active");
// cursor2.classList.add("active");
// });
// document.querySelector(".mouse__text span").addEventListener("mouseleave", () => {
// cursor.classList.remove("active");
// cursor2.classList.remove("active");
// });
// 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.active").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>
먼저 선택기를 설정합니다.
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
그리고 커서 좌표를 할당했습니다.
window.addEventListener("mousemove", e => {
e.style.left = e.pageX + "px";
cursor.style.top = e.pageY + "px";
cursor2.style.left = e.pageX + "px";
cursor2.style.top = e.pageY + "px";
이전 페이지와 달리 이 마우스 효과 페이지는 gsap을 사용하여 좌표 값을 할당합니다.
gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5});
gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top: e.pageY -15});
gsap
GSAP는 JavaScript로 작성된 애니메이션 그래픽용 라이브러리인 GreenSock Animation Platform의 약자입니다. GSAP는 HTML, CSS 및 SVG와 같은 웹 기술을 사용하여 만든 모션 그래픽을 제어하고 조작하는 데 사용됩니다.
이제 마우스 오버 효과를 만드는 방법을 살펴보겠습니다.
// 오버 효과
document.querySelector(".mouse__text span").addEventListener("mouseenter", () => {
cursor.classList.add("active");
cursor2.classList.add("active");
});
document.querySelector(".mouse__text span").addEventListener("mouseleave", () => {
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
물론 forEach에서 이 메서드를 변경할 수 있습니다.
위에서는 querySelector()를 사용했지만 forEach()를 작성할 때는 querySelectorAll()을 사용했습니다.
쿼리 선택기()
DOM(문서 개체 모델)에서 특정 요소를 선택하는 방법 중 하나입니다. CSS 선택기를 사용하여 선택된 요소를 반환합니다.
querySelectorAll()
JavaScript에서 제공하는 DOM API 중 하나로 특정 CSS 선택자를 이용하여 문서에서 요소를 찾는 방법입니다.querySelectorAll을 사용하면 CSS 선택기를 사용하여 여러 항목을 선택할 수 있습니다.
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");
});
});
이것은 forEach 문으로 작성할 수 있습니다.
위에서 효과를 3개까지 만들었으니 나머지 머리글과 바닥글 부분을 정리해보자.
헤더
document.querySelectorAll("#header li.active").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");
});
});
참조 !
| 재산 | 개체 설명 |
| addEventListener(“마우스무브”) | 이 메서드는 마우스가 움직일 때 발생하는 이벤트를 처리합니다. |
| addEventListener(“마우스엔터”) | 이 메서드는 마우스가 DOM 요소에 들어갈 때 발생하는 이벤트를 처리하는 데 사용됩니다. |
| addEventListener(“마우스 패드”) |
이 메서드는 마우스가 DOM 요소 밖으로 이동할 때 발생하는 이벤트를 처리하는 데 사용됩니다. |
| gsap.to() | 요소를 애니메이션으로 변환하는 GSAP(GreenSock Animation Platform) 라이브러리에서 제공하는 방법 중 하나입니다. |