“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
마우스 이펙트란?
마우스 이펙트(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다.
예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다.
마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다.
완성된 사이트를 보여드릴게요!
마우스 이펙트 사이트 코드
<!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>01. 마우스 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
.mouse__wrap {
cursor: none;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #fff;
background-color: rgba(225, 225, 225, 0.1);
user-select: none;
pointer-events: none;
transition:
background-color 0.3s,
border-color 0.3s,
transform 0.6s,
boder-radius 0.3s,
border 0.3s
;
}
.mouse__cursor.s1 {
background-color: rgba(151, 24, 24, 0.377);
border-color: rgba(231, 18, 18, 0.438);
}
.mouse__cursor.s2 {
background-color: rgba(151, 100, 24, 0.541);
border-color: rgba(231, 132, 18, 0.575);
transform: scale(2) rotateY(360deg);
}
.mouse__cursor.s3 {
background-color: rgba(151, 149, 24, 0.541);
border-color: rgba(227, 231, 18, 0.575);
transform: scale(1.5) rotateX(545deg);
}
.mouse__cursor.s4 {
background-color: rgba(54, 151, 24, 0.541);
border-color: rgba(18, 231, 64, 0.575);
transform: scale(10);
}
.mouse__cursor.s5 {
background-color: rgba(24, 126, 151, 0.541);
border-color: rgba(18, 164, 231, 0.575);
transform: skew(40deg);
}
.mouse__cursor.s6 {
background-color: rgba(26, 24, 151, 0.541);
border-color: rgba(18, 32, 231, 0.575);
transform: scale(0.3);
}
.mouse__cursor.s7 {
background-color: rgba(151, 24, 140, 0.541);
border-color: rgba(231, 18, 178, 0.575);
transform: scale(10);
border-radius: 0px;
}
.mouse__cursor.s8 {
background-color: rgba(104, 24, 151, 0.541);
border-color: rgba(181, 18, 231, 0.575);
transform: scale(10) skew(140deg) rotate(200deg);
border-radius: 0px;
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.mouse__text p {
font-size: 2vw;
line-height: 1.9;
}
.mouse__text p:last-child {
font-size: 3vw;
}
.mouse__text p span {
color: #eeeb3e;
border-bottom: 1px dashed #eeeb3e;
}
.mouse__info {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
font-size: 16px;
line-height: 1.6;
}
</style>
</head>
<body class="img03 bg01 font11">
<header id="header">
<h1>Javascript Mouse Effect01</h1>
<p>마우스 이펙트 - 마우스 따라다니기</p>
<ul>
<li class="active"><a href="mouseEffect01.html">1</a></li>
<li><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__text">
<p>Rather than <span class="s1">regretting</span> <span class="s2"> yesterday</span>, let us <span class="s3">work</span> for <span class="s4">tomorrow.</span></p>
<p><span class="s5">어제</span>를 <span class="s6">후회</span>하기 보다는 <span class="s7">내일</span>을 위해 <span class="s8">노력</span>하라.</p>
</div>
</div>
<div class="mouse__info">
<ul>
<li>clientX : <span class="clientX">0</span>px</li>
<li>clientY : <span class="clientY">0</span>px</li>
<li>offsetX : <span class="offsetX">0</span>px</li>
<li>offsetY : <span class="offsetY">0</span>px</li>
<li>pageX : <span class="pageX">0</span>px</li>
<li>pageY : <span class="pageY">0</span>px</li>
<li>screenX : <span class="screenX">0</span>px</li>
<li>screenY : <span class="screenY">0</span>px</li>
</ul>
</div>
</main>
<!-- //main -->
이벤트 속성 참고
| 속성 | 속성 설명 |
| clientX | X좌표 값 : 브라우저 기준 |
| clientY | Y좌표 값 : 브라우저 기준 |
| offsetX | X좌표 값 : 요소 기준 |
| offsetY | Y좌표 값 : 요소 기준 |
| pageX | X좌표 값 : 페이지 기준 |
| pageY | Y좌표 값 : 페이지 기준 |
| screenX | X좌표 값 : 디바이스 기준 |
| screenY | Y좌표 값 : 디바이스 기준 |
마우스가 움직이는 만큼 좌표 값이 바뀐다
그리고 각 마우스 커서 위치마다 효과를 주어서 이렇게 만들어주었습니다.
script 코드
window.addEventListener("mousemove", function(event){
document.querySelector(".clientX").innerHTML = event.clientX;
document.querySelector(".clientY").innerHTML = event.clientY;
document.querySelector(".offsetX").innerHTML = event.offsetX;
document.querySelector(".offsetY").innerHTML = event.offsetY;
document.querySelector(".pageX").innerHTML = event.pageX;
document.querySelector(".pageY").innerHTML = event.pageY;
document.querySelector(".screenX").innerHTML = event.screenX;
document.querySelector(".screenY").innerHTML = event.screenY;
});
// 선택자
const cursor = document.querySelector(".mouse__cursor");
const mouseinfo = document.querySelectorAll(".mouse__text ul li span");
window.addEventListener("mousemove", function(e){
cursor.style.left = e.clientX -25 + "px";
cursor.style.top = e.clientY -25 + "px";
});
window.addEventListener()는 윈도우 객체에서 발생하는 이벤트를 처리하기 위한 메소드입니다.
웹 페이지의 전체적인 동작에 영향을 미치는 이벤트들을 처리할 때 사용합니다.
위에서는 선택자를 설정해주고 마우스 이동 이벤트가 발생할 때마다 커서를 마우스 포인터 위치로 이동시키는 동작을 주었습니다.
이벤트 핸들러 함수는 'e' 매개변수를 받아 마우스 포인터의 위치 정보를 이용하여 'cursor' 요소의 위치를 변경합니다.
e.clientX와 e.clientY는 마우스 포인터의 X, Y 좌표를 반환합니다.
cursor.style.left와 cursor.style.top은 cursor 요소의 CSS left와 top 속성을 변경합니다.
따라서 커서가 마우스 포인터를 따라 이동하게 됩니다.
// s1
document.querySelector(".s1").addEventListener("mouseover", function(){
cursor.classList.add("s1");
});
document.querySelector(".s1").addEventListener("mouseout", function(){
cursor.classList.remove("s1");
});
// s2
document.querySelector(".s2").addEventListener("mouseover", function(){
cursor.classList.add("s2");
});
document.querySelector(".s2").addEventListener("mouseout", function(){
cursor.classList.remove("s2");
});
// s3
document.querySelector(".s3").addEventListener("mouseover", function(){
cursor.classList.add("s3");
});
document.querySelector(".s3").addEventListener("mouseout", function(){
cursor.classList.remove("s3");
});
// s4
document.querySelector(".s4").addEventListener("mouseover", function(){
cursor.classList.add("s4");
});
document.querySelector(".s4").addEventListener("mouseout", function(){
cursor.classList.remove("s4");
});
// s5
document.querySelector(".s5").addEventListener("mouseover", function(){
cursor.classList.add("s5");
});
document.querySelector(".s5").addEventListener("mouseout", function(){
cursor.classList.remove("s5");
});
// s6
document.querySelector(".s6").addEventListener("mouseover", function(){
cursor.classList.add("s6");
});
document.querySelector(".s6").addEventListener("mouseout", function(){
cursor.classList.remove("s6");
});
// s7
document.querySelector(".s7").addEventListener("mouseover", function(){
cursor.classList.add("s7");
});
document.querySelector(".s7").addEventListener("mouseout", function(){
cursor.classList.remove("s7");
});
// s8
document.querySelector(".s8").addEventListener("mouseover", function(){
cursor.classList.add("s8");
});
document.querySelector(".s8").addEventListener("mouseout", function(){
cursor.classList.remove("s8");
});
위의 코드는 '.s1' 클래스를 가진 요소에 마우스를 올렸을 때, 'cursor' 요소에 .'s1' 클래스를 추가하고 마우스를 해당 요소에서 내렸을 때,' cursor' 요소에서 '.s1' 클래스를 제거하는 동작을 구현합니다.
이 과정을 '.s8' 까지 반복하였습니다.
// for문
for(let i=1; i<=8; i++){
document.querySelector(".s"+i).addEventListener("mouseover", function(){
cursor.classList.add("s"+i);
});
document.querySelector(".s"+i).addEventListener("mouseout", function(){
cursor.classList.remove("s"+i);
});
}
위 과정을 for문으로 바꾸어주었습니다.
for 문을 사용하면 .s1, .s2, ... .s8 클래스를 가진 요소에 대해 반복적으로 이벤트 리스너를 등록할 수 있습니다.
반복문의 인덱스 i를 이용하여 .s1 ~ .s8 클래스명을 동적으로 생성하여 요소를 선택하고, 해당 요소에 대해 mouseover와 mouseout 이벤트를 등록합니다.
이벤트 핸들러 함수 내부에서는 cursor 요소에 .s1 ~ .s8 클래스를 동적으로 추가/제거합니다.
// forEach문
document.querySelectorAll(".mouse__text span").forEach((span, num) => {
span.addEventListener("mouseover", function(){
cursor.classList.add("s"+(num+1));
});
span.addEventListener("mouseout", function(){
cursor.classList.remove("s"+(num+1));
});
});
또 for문에서 forEach()로 쓸 수 있습니다.
querySelectorAll() 메소드는 querySelector()와 달리, 모든 선택자에 대해 NodeList 객체를 반환합니다.
이 NodeList 객체에 대해 forEach() 메소드를 호출하여 각 요소에 대해 반복적으로 이벤트 리스너를 등록할 수 있습니다.
또한, forEach() 메소드의 두 번째 인자로 요소의 인덱스를 받을 수 있습니다.
이를 이용하여 각 요소에 대응하는 클래스명을 동적으로 생성하고, cursor 요소에 해당 클래스를 추가/제거하는 동작을 구현할 수 있습니다.
//getAttribute();
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr = span.getAttribute("class");
//attr = s1 s2 s3 s4 s5 s6 s7 s8
span.addEventListener("mouseover", function(){
cursor.classList.add(attr);
});
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr);
});
});
또 getAttribute() 을 사용하여 쓸 수 있습니다.
getAttribute() 메소드를 사용하면 요소의 특정 속성 값을 가져올 수 있습니다.
위 코드에서는 .mouse__text span 선택자에 해당하는 요소들에 대해 반복문을 실행하면서, 각 요소의 클래스 속성 값을 가져옵니다.
이를 이용하여 이벤트 핸들러 함수 내부에서 cursor 요소에 해당 클래스를 추가/제거하는 동작을 구현합니다.
querySelector
DOM(Document Object Model)에서 특정 요소를 선택하는 메소드 중 하나입니다. CSS 선택자를 사용하여 선택된 요소를 반환합니다.
querySelectorAll
JavaScript에서 제공하는 DOM API 중 하나로, 문서 내에서 특정한 CSS 선택자를 이용하여 요소들을 찾는 메소드입니다querySelectorAll을 사용하면 CSS 선택자를 이용하여 여러 요소들을 선택할 수 있습니다.
참고!
| 속성 | 속성 설명 |
| getAttribute() | HTML 요소의 특정 속성 값을 가져오는 JavaScript 메서드입니다. |
| addEventListener() | 이벤트를 처리하기 위한 메소드입니다. 이 메소드는 특정 이벤트가 발생할 때 실행할 함수를 등록할 수 있습니다. |
| addEventListener("mousemove") | 마우스가 움직일 때 발생하는 이벤트를 처리하기 위한 메소드입니다. |
| addEventListener("mouseover") | 마우스가 요소 위에 올라갈 때 발생하는 이벤트를 처리하기 위한 메소드입니다. |
| addEventListener("mouseout") | 마우스가 요소에서 벗어날 때 발생하는 이벤트를 처리하기 위한 메소드입니다. |
