“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
HTML
<!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>03. 마우스 이펙트</title>
<style>
#header {
z-index: 10;
}
.mouse__wrap {
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.5vw;
line-height: 1.6;
z-index: 100;
}
.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);
background-image: url(img/mouseEffect05-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
</style>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
</head>
<body class="img05 bg05 font05">
<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>
<!-- //heaver -->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p>"The road to success and the road to <br>failure are almost exactly the same."</p>
<p>성공하는 길과 실패하는 길은 거의 같다.</p>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
</footer>
<!-- //footer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
</body>
</html>오늘은 마우스을 움직이면 따라다니면서 돋보기처럼 선명하게 보이는 효과를 줍니다.
마우스을 따라다니는 200px의 원을 만들고 커서의 가운데로 오도록 합니다.(background-position: center center;)
| 속성 | 속성특징 | 속성 내용 |
| background-attachment: fixed; | 배경 이미지가 화면에서 고정되어 스크롤해도 항상 같은 위치에 남아 있게 됩니다. | 배경이미지를 고정하여 커서를 움직여도 배경이미지는 움직이지 않고 그위로 움직이게 됩니다. |
script
const cursor = document.querySelector(".mouse__cursor");
const circle = cursor.getBoundingClientRect();
window.addEventListener("mousemove", e=> {
gsap.to(cursor,{
duration: 0.5,
left: e.pageX - cursor.offsetWidth/2,
top: e.pageY - cursor.offsetHeight/2
});
})
위에 커서를 변수로 cusor로 저장합니다.
그후 circle에 cursor의 위치값을 받기위해 getBoundingClientRect()을 사용하여 cursor의 위치와 크기 정보를 객체로 반환합니다.
그렇게 되면 circle은 커서의 위치와 크기정보를 받습니다.
console.log(cursor.getBoundingClientRect());
// const COMRect={
// 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 - cursor.offsetWidth/2,
top: e.pageY - cursor.offsetHeight/2
});
})
그 후 윈도우을 기준으로 마우스를 움직일때 받는 위치값을 gsap.to()을 이용하여 애니메이션화 합니다.
그리고 cursor 요소의 위치를 e.pageX - cursor.offsetWidth/2와 e.pageY - cursor.offsetHeight/2로 변경하였습니다. 마우스 이벤트가 발생한 위치에서 cursor 요소의 가로/세로 크기의 절반을 뺀 값으로, 마우스 커서가 cursor 요소의 중심 위치에 위치하도록 합니다.
gsap.to()
gsap.to()는 GreenSock Animation Platform (GSAP) 라이브러리에서 제공하는 TweenMax/TweenLite의 메소드 중 하나입니다. 이 메소드를 사용하면 DOM 요소의 CSS 속성 값을 변경하거나, DOM 요소의 위치/크기/투명도 등을 애니메이션화 할 수 있습니다. 브라우저마다 지원하는 requestAnimationFrame API를 사용하여 속도가 빠르고 부드러운 애니메이션을 구현할 수 있습니다.