“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
마우스 이펙트란?
마우스 이펙트(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다.
예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다.
마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다.
마우스 이펙트(3) 사이트 코드
<!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">
<meta name="view-transition" content="same-origin">
<title>03. 마우스 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
#header {
z-index: 100;
}
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 10;
}
.mouse__text p {
font-size: 3vw;
line-height: 1.6;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #fff;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(img/mouseEffect02-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
</style>
</head>
<body class="img02 bg02 font1">
<header id="header">
<h1>Javascript Mouse Effect03</h1>
<p>마우스 이펙트</p>
<ul>
<li><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li class="active"><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>Your actions today will determine your future</p>
<p>오늘의 행동이 내일을 결정한다.</p>
</div>
</div>
</main>
<!-- //main -->
이번 마우스 이펙트는 마우스를 따라다니는 조명 효과를 주었습니다.
script 코드
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
//선택자
const cursor = document.querySelector(".mouse__cursor");
//01. 옛날 방식
// console.log(cursor.clientWidth); //190 //보더값 미포함
// console.log(cursor.clientHeight); //190 //보더값 미포함
// console.log(cursor.offsetWidth); //200 //보더값 포함
// console.log(cursor.offsetHeight); //200 //보더값 포함
//불러오는 방법
// window.addEventListener("mousemove", e => {
// gsap.to(cursor, {
// duration: 0.5,
// left: e.pageX - cursor.clientWidth/2,
// top: e.pageY - cursor.offsetHeight/2
// });
// });
//02. 새로운 방식
// console.log(cursor.getBoundingClientRect());
const circle = cursor.getBoundingClientRect();
const DOMRect = {
bottom: 200,
height: 200,
left: 0,
right: 200,
top: 0,
width: 200,
x: 0,
y: 0
};
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration: 0.5,
left: e.pageX - circle.width/2,
top: e.pageY - circle.height/2
});
});
</script>
일단 제일 먼저 선택자를 설정해주었습니다.
const cursor = document.querySelector(".mouse__cursor");
그리고 이제 마우스 커서를 따라 움직이는 커서 효과를 만들어 보겠습니다.
//01. 옛날 방식
console.log(cursor.clientWidth); //190 //보더값 미포함
console.log(cursor.clientHeight); //190 //보더값 미포함
console.log(cursor.offsetWidth); //200 //보더값 포함
console.log(cursor.offsetHeight); //200 //보더값 포함
//불러오는 방법
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration: 0.5,
left: e.pageX - cursor.clientWidth/2,
top: e.pageY - cursor.offsetHeight/2
});
});
먼저, 전에 사용하던 방식으로 clientWidth, clientHeight, offsetWidth, offsetHeight 속성을 사용하여 cursor 요소의 크기를 측정하고 출력합니다. 이 속성들은 웹 브라우저에서 요소의 크기를 가져오는 방법 중 일부입니다.
그 다음, window.addEventListener 메소드를 사용하여 mousemove 이벤트를 등록합니다. 이벤트 핸들러 함수는 gsap 라이브러리를 사용하여 cursor 요소의 위치를 마우스 위치로 이동시키는 애니메이션을 만듭니다.
이때, gsap.to() 메소드를 사용하여 cursor 요소를 이동시키는데, left와 top 속성을 사용하여 요소의 위치를 조정합니다.
마우스 위치에서 요소의 가운데를 맞추기 위해 cursor.clientWidth와 cursor.offsetHeight 속성의 절반 값을 빼주었습니다.
그리고 이제 위 코드와는 다른 요즘 사용하는 방식을 알아보겠습니다.
//02. 새로운 방식
// console.log(cursor.getBoundingClientRect());
const circle = cursor.getBoundingClientRect();
const DOMRect = {
bottom: 200,
height: 200,
left: 0,
right: 200,
top: 0,
width: 200,
x: 0,
y: 0
};
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration: 0.5,
left: e.pageX - circle.width/2,
top: e.pageY - circle.height/2
});
});
먼저, cursor 요소의 위치와 크기를 나타내는 DOMRect 객체를 수동으로 생성합니다.
이 객체는 getBoundingClientRect() 메소드를 호출하여 얻어지는 객체와 유사한 구조를 가지고 있습니다.
그 다음, window.addEventListener 메소드를 사용하여 mousemove 이벤트를 등록합니다. 이벤트 핸들러 함수는 gsap 라이브러리를 사용하여 cursor 요소의 위치를 마우스 위치로 이동시키는 애니메이션을 만듭니다.
이때, gsap.to() 메소드를 사용하여 cursor 요소를 이동시키는데, left와 top 속성을 사용하여 요소의 위치를 조정합니다. 마우스 위치에서 요소의 가운데를 맞추기 위해 circle.width와 circle.height 속성의 절반 값을 빼주었습니다.
이렇게 함으로써 마우스 커서가 요소의 가운데를 따라 움직이는 효과를 구현할 수 있습니다.
하지만 getBoundingClientRect() 메소드를 사용하여 cursor 요소의 위치와 크기를 동적으로 얻어오면 더 정확한 위치를 계산할 수 있습니다.
참고!
| 속성 | 속성 설명 |
| addEventListener("mousemove") | 마우스가 움직일 때 발생하는 이벤트를 처리하기 위한 메소드입니다. |
| clientWidth | 웹 브라우저에서 요소의 내부 너비를 나타내는 속성입니다. 이 값은 요소의 패딩(padding)을 포함한 내부 너비를 나타냅니다. |
| clientHeight | 는 웹 브라우저에서 요소의 내부 높이를 나타내는 속성입니다. 이 값은 요소의 패딩(padding)을 포함한 내부 높이를 나타냅니다. |
| offsetWidth | 요소의 외부 너비를 나타내는 속성입니다. 이 값은 요소의 내부 너비와 요소를 둘러싼 여백(margin)과 테두리(border)를 포함한 전체 너비를 나타냅니다. |
| offsetHeight | 요소의 외부 높이를 나타내는 속성입니다. 이 값은 요소의 내부 높이와 요소를 둘러싼 여백(margin)과 테두리(border)를 포함한 전체 높이를 나타냅니다. |
| getBoundingClientRect() | 요소의 크기와 위치에 대한 정보를 제공하는 DOM 메서드입니다. 이 메서드를 호출하면, 요소의 위치와 크기를 나타내는 객체인 DOMRect를 반환합니다. |
| GSAP.to() | GSAP(GreenSock Animation Platform) 라이브러리에서 제공하는 메소드 중 하나로, 요소를 애니메이션으로 변환하는 데 사용됩니다. |
| background-attachment | 배경 이미지가 스크롤될 때의 동작을 지정하는 CSS 속성입니다. |
