Leeyanggoo
[JS] 마우스 이펙트 만들기3!! 조명처럼 빛나는 내 마우스! 본문
이전의 마우스 이펙트는 자바스크립트의 라이브러리 "GSAP"를 이용해서 좀 더 커서가 부드러운 효과를 만들었습니다.
이제는 쭉 "GSAP"를 적용하는 방향으로 이펙트를 만드려 합니다!
이번에 만들 마우스 이펙트는 조명 효과를 낼 수 있는 기능입니다.
//CSS에 저장된 img03
body.img03 {
background-image: url(../img/mouseEffect03-min.jpg);
}
body.bg03::after {
background-color: rgba(245, 177, 121, 0.7);
}
<body class="img03 bg03 font03">
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p>I've never loved myself</p>
<p>단 한번도 스스로를 사랑하지 않았노라</p>
</div>
</div>
</main>
</body>CSS를 적용해서 조명효과를 만들어보자!!
#header {
z-index: 100;
}
#footer {
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;
position: relative;
z-index: 10;
}
.mouse__text p {
font-size: 3vw;
line-height: 2;
}
.mouse__text p:last-child {
font-size: 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;
}
마우스 커서에 마치 조명처럼 뒷 배경을 비춰주는 이펙트를 만들기 위해선 배경 이미지에 대한 이해가 필요합니다.
위의 HTML의 body를 보시면 이미 배경 이미지가 CSS 속성으로 저장된 걸 알 수 있습니다.
하지만 ".mouse__cursor"의 background-image의 url에도 같은 이미지가 들어갈 걸 볼 수 있죠?
여기서 background-attachment에 대한 속성을 보고 가겠습니다!
background-attachment : 배경 이미지가 요소와 상대적으로 고정되는지 여부를 지정하는 속성입니다.
| scroll | 배경 이미지가 요소와 함께 스크롤됩니다. |
| fixed | 배경 이미지가 뷰포트(viewport)에 고정됩니다. 요소와 함께 스크롤되지 않습니다. |
| local | 배경 이미지가 요소와 함께 스크롤됩니다. 다만, 요소의 내부 스크롤 영역에서 스크롤되지 않습니다. |
| initial | 기본값으로 설정합니다. |
| inherit | 부모 요소로부터 값을 상속받습니다. |
우리는 background-attachment의 "fixed"라는 속성을 이용해서 다른 하나의 원본 배경 이미지를 뷰포트에 고정시킬 수 있습니다.
이렇게 하면 이미지 2개가 겹쳐있는 것과 같은 상태가 되겠죠?
메서드 "getBoundingClientRect()"를 이용해보자!!
// 선택자
const cursor = document.querySelector(".mouse__cursor");
console.log(cursor.getBoundingClientRect());
//getBoundingClientRect()가 반환하는 DOMRect
const DOMRect = {
bottom: 200,
height: 200,
left: 0,
right: 200,
top: 0,
width: 200,
x: 0,
y: 0
}
getBoundingClientRect() : 요소(element)의 위치와 크기 정보를 반환하는 메서드입니다. 이 메서드를 호출하면 요소의 위치와 크기 정보가 포함된 DOMRect 객체를 반환합니다. DOMRect 객체는 left, top, right, bottom, width, height 속성을 가지고 있으며, 이를 통해 요소의 위치와 크기를 파악할 수 있습니다.
getBoundingClientRect()는 요소의 여러 위치와 크기 정보를 반환하는 메서드입니다.
따라서 커서의 위치와 크기 정보를 반환해서 ".mouse__cursor"의 배경 이미지만 비추게 한다면 마치 조명을 킨 것 같은 효과가 나게 할 수 있습니다!
// 선택자
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
});
});
getBoundingClientRect()로 반환받을 커서의 위치와 크기 정보를 "circle"이라는 변수에 담습니다.
window.addEventListener()로 커서의 효과를 선택합니다.
GSAP를 이용해 추가적인 효과를 설정하면 조명 효과를 가진 커서가 완성됩니다!!
😮💨 이번 예제 보러 가기
