한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
마우스를 따라다니는 조명 효과
마우스 효과 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>01. 마우스 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
.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: 3vw;
line-height: 1.6;
z-index: 10;
}
.mouse__text p:last-child {
font-size: 3vw;
}
.mouse__text p span {
color: rgb(0, 255, 229);
}
.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>
</head>
<body class="img03 bg03 font06">
<header id="header">
<h1>Javasrcipt 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__cursor2"></div>
<div class="mouse__text">
<p>Money can't buy happiness, but sitting in a Mercedes is more comfortable than riding a bike and crying.</p>
<p>돈으로는 행복을 살 순 없지만, 자전거에 탄 채로 우는 것보단 </span>벤츠</span>에 앉아 우는 게 편하다.</p>
</div>
</div>
</main>
<!--main-->
<footer id="footer">
<a href="mailto:esansi@naver.com">esansi@naver.com</a></footer>
</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);
// console.log(cursor.clientHeight);
// console.log(cursor.offsetWidth);
// console.log(cursor.offsetHeight);
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>1,2번과 동일하게 cursor를 만든 뒤 커서 좌표를 출력해 주는데 새로운 방법을 사용해서 출력을 하려합니다.
getBoundingClientRect()
getBoundingClientRect()뷰포트를 기준으로 지정된 요소의 위치를 나타내는 DOMRect 객체를 반환하는 JavaScript의 메서드입니다. DOMRect 개체에는 요소의 크기와 위치를 결정하는 데 사용할 수 있는 top, left, bottom, right, width및 등 의 속성이 포함되어 있습니다.
변수 const circle를 만들어준 뒤 커서를 넣어줍니다.
const cursor = document.querySelector(".mouse__cursor");그렇게 되면
이라는 값을 뽑아내줍니다. 여기서 우리가 필요한건 width 값고 height값입니다.
window.addEventListener("mousemove", e =>{
gsap.to(cursor, {
duration:0.5,
left: e.pageX - circle.width/2,
top: e.pageY - circle.height/2
});
});마우스를 따라오게 하기위해 또 다시 addEventListener("mousemove") 와 마우스 효과에서 새롭게 사용한 gsap.to()를 사용해줍니다. 마우스가 좌표에 살짝 안 맞기 때문에 x의 값을 circle란 변수 안에 있는 width값에 / 2 를 빼주고 page Y의 값또한 circle 란 변수 안에 있는height 값에 / 2를 빼주면 커서가 정중앙으로 오게 됩니다.
커서에 설정해준 css에 배경과 동일한 이미지를 넣어줘 돋보기? 조명 ? 효과를 내줍니다.
.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;background-image: url(img/mouseEffect03-min.jpg); ------------------------------커서 동그라미 안 배경이미지를 넣어준다
background-size: cover; -----넣어준 이미지의 사이즈 조절
background-position: center center; -----넣어준 이미지의 위치 조절
background-attachment: fixed; -----넣어준 이미지를 고정시킨다.