마우스가 이동하는 방향에 따라 뒷배경이 보이는 마우스 효과를 만들었습니다.
<body class="img07 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>Behind the cloud is the sun still shining.</p>
<p>구름 뒤엔 여전히 태양이 빛나고 있다.</p>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:ebmdols@naver.com">ebmdols@naver.com</a>
</footer>header의 6개의 li태그는 각 페이지의 번호를 의미 합니다.
mouse__cursor는 마우스의 모양을 만들기 위함이고 mouse__text는 화면 중간에 글씨를 적기 위해 만들어 주었습니다.
스타일 코드 입니다.
<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; //3vw는 뷰포트의 너비(width) 값의 3%를 나타내는 상대적인 단위입니다. 뷰포트는 웹 페이지를 보는 브라우저 창의 크기를 의미합니다.
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/mouseEffect07-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
</style>.mouse__wrap의 cursor: none으로 커서를 보이지 않게 작업했습니다.
overflow: hidden는 요소의 내용이 자신의 경계를 벗어나면 해당 요소의 일부를 숨기는 기능을 수행합니다.
overflow 속성은 visible, hidden, scroll, auto와 같은 값 중 하나를 갖습니다. 이 중 hidden 값을 갖게 되면, 해당 요소의 내용이 자신의 경계를 벗어나더라도 해당 요소의 크기가 그대로 유지되면서 내용이 보이지 않게 됩니다.
z-index는 CSS 속성 중 하나로, 요소의 위치와 쌓이는 순서를 조절하는 속성입니다. 웹 페이지에서 요소는 일반적으로 다른 요소와 겹쳐질 수 있습니다. 이러한 경우에 z-index 속성을 사용하여 요소의 쌓이는 순서를 조절하여 다른 요소 위에 표시되도록 할 수 있습니다.
마우스가 이동하는 방향에 따라 움직일 커서 모양은 width 200px, height 200px로 크기를 지정하고 border-radius를 50% 주어 원 모양으로 만들었습니다.
background-image: url(img/mouseEffect07-min.jpg);는 마우스 커서 모양안에 들어갈 이미지를 의미합니다.
background-size: cover는 배경 이미지(background image)를 요소(element)에 맞게 조절하는 속성 중 하나입니다. 이때, 이미지가 요소를 완전히 덮도록 조절됩니다. 따라서, 요소의 가로 세로 비율과 배경 이미지의 가로 세로 비율이 다를 경우, 이미지가 잘리게 됩니다.
background-attachment: fixed; 이 페이지를 만들기 위해 제일 중요한 속성입니다. 요소의 배경 이미지가 스크롤되지 않고 고정되도록 설정하는 속성입니다. 배경 이미지가 뷰포트에 고정되어 스크롤 되지 않습니다. 이렇게 설정된 배경 이미지는 요소와 함께 움직이지 않고 고정되므로, 요소 내용이 스크롤 되더라도 배경 이미지는 계속 뷰포트의 위치에 그대로 남아 있습니다.
<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
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 - cursor.clientWidth/2,
// top: e.pageY - cursor.clientHeight/2
// });
// })
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration: 0.5,
left: e.pageX - circle.width/2,
top: e.pageY - circle.height/2
});
})
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> gsap를 사용하기 위해 링크를 불러주었습니다.
const circle = cursor.getBoundingClientRect() 은 cursor라는 변수에 저장된 요소의 위치와 크기 정보를 담은 DOMRect 객체를 circle이라는 변수에 저장하는 것입니다. 이후에 circle 변수를 활용하여 요소의 위치와 크기 정보를 다양한 용도로 활용할 수 있습니다.
consolelog를 확인하면 안에 들어가 있는 값을 확인할 수 있습니다.
window.addEventListener("mousemove", e => {...})는 윈도우(window) 객체에서 mousemove 이벤트가 발생할 때마다 콜백 함수를 실행하는 이벤트 리스너를 등록하는 코드입니다.
e는 mousemove 이벤트 객체를 나타내며, 이 객체에서 pageX와 pageY 속성을 통해 마우스 커서의 위치 정보를 가져올 수 있습니다.
gsap.to(cursor, {...})는 gsap 라이브러리를 사용하여 cursor 변수에 저장된 요소의 위치를 조정하는 코드입니다. duration 속성은 애니메이션 지속 시간을 설정하며, left와 top 속성은 cursor 변수에 저장된 요소의 위치를 e.pageX - circle.width/2와 e.pageY - circle.height/2 값으로 변경합니다. 이 값은 circle 변수에 저장된 요소의 위치와 크기 정보를 활용하여 마우스 커서를 중앙으로 놓고 이동시키는 것입니다.