마우스 이펙트 ( 3 )
getBoundingClientRect()는 DOM 요소의 크기와 위치 정보를 제공하는 메서드입니다.
[ 숨겨진 배경화면을 밝혀보세요! ]
VSCode
<body class="img03 bg08 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>
</ul>
</header>
<!-- //header-->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p>Yeah, life is a good thing, whatever it is.</p>
<p>그래, 어떻든 간에 인생은 좋은 것이다.</p>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="mailto:ehcjswo1@gmail.com">ehcjswo1@gmail.com</a>
</footer>
<!-- //footer-->
header
선택한 페이지를 쉽게 이동 할 수 있도록 버튼을 만들었습니다.
main
선택자엔 커서클래스, 명언이 들어갈 텍스트 클래스가 있고 중요한 단어,문장에 span태그를 줘서 마우스 이펙트 효과를 넣을 수 있게 만들었습니다.
footer
선택자엔 이메일 링크가 있습니다.
CSS
<style>
.mouse__cursor {
cursor: none;
}
#header {
z-index: 2;
}
.mouse__text {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.mouse__text p {
font-size: 2.7vw;
line-height: 1.6;
z-index: 2;
}
.mouse__text p:last-child {
font-size: 3.4vw;
}
.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.4);
background-image: url(img/MouseEffect03-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
z-index: 1;
}
#footer {
z-index: 2;
}
</style>
기본 배경화면 색 투명도를 높여놨습니다.
.mouse__cursor 클래스에 화면을 밝혀주는 효과를 주기 위해 커서 보더값 안에 같은 배경사진을 한장 더 넣습니다.
커서는 움직이지만 사진을 고정시켜 배경화면을 보며 조명효과를 느낄 수 있습니다.
커서가 지나가도 글자는 볼 수 있도록
#header
.mouse__text p
#footer
에게 z-index 값을 .mouse__cursor 값보다 높게 줍니다.
script
<script>
//선택자
const cursor = document.querySelector(".mouse__cursor");
const circle = cursor.getBoundingClientRect();
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration: 0.5,
left: e.pageX - circle.width/2,
top: e.pageY - circle.height/2
});
});
</script>
처음 보는 메서드가 있습니다.
getBoundingClientRect( )는 DOM 요소의 크기와 위치 정보를 제공하는 메서드입니다.
이 메서드를 호출하면, 해당 요소의 경계 상자(bounding box)의 크기와 위치 정보를 나타내는 객체를 반환합니다.
이 객체에는 left, top, right, bottom, width, height와 같은 속성이 포함되어 있습니다.
이러한 속성은 각각 요소의 경계 상자의 왼쪽, 위쪽, 오른쪽, 아래쪽 좌표, 폭, 높이를 나타냅니다.
일반적으로 요소의 위치와 크기를 계산하거나 요소의 상태에 따라 동적으로 변경된 값을 가져오는 데 사용됩니다. 예를 들어, 요소의 위치를 알아내거나 요소를 드래그 앤 드롭하여 위치를 변경할 때 유용합니다. 또한 요소가 스크롤되는 동안 현재 보이는 화면 영역을 계산하는 데에도 사용됩니다.
먼저 querySelector( ) 메서드를 사용하여 HTML 문서에서 클래스 이름이 "mouse__cursor"인 요소를 선택합니다.
그리고 getBoundingClientRect() 메서드를 사용하여 circle 변수에 선택한 요소의 크기와 위치 정보를 저장합니다.
그 다음, window.addEventListener() 메서드를 사용하여 "mousemove" 이벤트를 등록합니다.
이벤트가 발생하면 gsap.to() 메서드를 사용하여 선택한 요소의 위치를 변경합니다. gsap.to() 메서드는 GreenSock Animation Platform (GSAP) 라이브러리의 메서드로, 지정된 요소의 속성을 특정 값으로 일정 시간 동안 부드럽게 변경하는 애니메이션을 만듭니다.
위 코드에서는 마우스의 위치를 추적하여 cursor 요소의 left와 top 속성을 변경합니다.
이때, cursor 요소의 크기를 고려하여 마우스 커서가 중앙에 위치하도록 합니다.
이 코드를 사용하면 마우스를 움직일 때 선택한 요소가 따라 움직이는 효과를 구현할 수 있습니다.
이전글
(마우스 이펙트1)
https://ehcjswo.tistory.com/47
(마우스 이펙트2)
https://ehcjswo.tistory.com/48