QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
마우스 이펙트란?
마우스 이펙트(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다.
예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다.
마우스 이펙트는 웹 개발에서 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="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 코드
<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는 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()을 사용했습니다.
querySelector()
DOM(Document Object Model)에서 특정 요소를 선택하는 메소드 중 하나입니다. 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까지 만들어 주었으니 나머지 헤더 부분과 푸터 부분도 정리해보겠습니다.
header
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");
});
});
footer
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("mousemove") | 마우스가 움직일 때 발생하는 이벤트를 처리하기 위한 메소드입니다. |
| addEventListener("mouseenter") | DOM 요소에 마우스가 진입했을 때 발생하는 이벤트를 처리하기 위해 사용되는 메소드입니다. |
| addEventListener("mouseleave") |
DOM 요소에서 마우스가 나갔을 때 발생하는 이벤트를 처리하기 위해 사용되는 메소드입니다. |
| gsap.to() | GSAP(GreenSock Animation Platform) 라이브러리에서 제공하는 메소드 중 하나로, 요소를 애니메이션으로 변환하는 데 사용됩니다. |
반응형
