MouseEffect 만들기
GSAP를 이용하여 마우스커서에 라이브러리를 넣어주어 조명효과를 구현해 보겠습니다.
코드블럭
<!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">
</head>
<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/mouseEffect03-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
</style>
<body class="img03 bg03 font03">
<header id="header">
<h1>Javascript Mouse Effect01</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>In youth we learn, in age we understand.</p>
<p>우리는 젊을 때에 배우고 나이가 들어서 이해한다.</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");
// console.log(cursor.clientWidth); //190
// console.log(cursor.clientHeight); //190
// console.log(cursor.offsetWidth); //200
// console.log(cursor.offsetHeight); //200
// 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>
</body>
</html>보충설명
🎈 document.querySelector()를 사용하여 선택자를 만들어줍니다. 선택자는".mouse__cursor"에서 정보를 가져옵니다.
🎈 getBoundingClientRect() 메서드는 DOM 요소의 크기와 위치 정보를 제공하는 메서드입니다. 이 메서드를 사용하면, 주어진 요소의 경계 상자에 대한 정보를 반환할 수 있습니다. 이 경계 상자는 해당 요소의 화면 위치와 크기를 나타냅니다.
이 객체에는 다음과 같은 정보가 포함됩니다.
x: 요소의 경계 상자 왼쪽 가장자리 x좌표값
y: 요소의 경계 상자 위쪽 가장자리 y좌표값
width: 요소의 너비
height: 요소의 높이
top: 요소의 경계 상자 위쪽 가장자리 y좌표값
right: 요소의 경계 상자 오른쪽 가장자리 x좌표값
bottom: 요소의 경계 상자 아래쪽 가장자리 y좌표값
left: 요소의 경계 상자 왼쪽 가장자리 x좌표값
🎈 window.addEventListner()메서드는 웹 브라우저에서 발생하는 이벤트를 처리하기 위해 사용됩니다. 이 메서드는 이벤트가 발생했을 때 실행될 콜백 함수를 등록할 수 있습니다.
'window' 객체는 브라우저 창을 나타내며, 이 객체에 대한 이벤트 리스너를 등록하면 전체 문서에서 발생하는 이벤트를 처리할 수 있습니다. 예를 들어, load 이벤트는 문서가 로드되었을 때 발생하므로, window 객체에서 load 이벤트 리스너를 등록하면 문서가 로드된 후에 실행될 함수를 지정할 수 있습니다.
event : 등록할 이벤트의 이름을 지정합니다. 예를 들어, "click", "load", "scroll" 등이 있습니다.
function : 이벤트가 발생했을 때 실행될 콜백 함수를 지정합니다.