728x90
마우스 효과03
자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이미지에 마우스를 올렸을 때 조명을 비춘 것처럼 보이는 효과입니다.
자바스크립트
마우스 효과를 만들기 위한 자바스크립트 작성법입니다. gsap를 이용하여 효과를 주었습니다.
const cursor = document.querySelector(".mouse__cursor");
// const circleW = cursor.offsetWidth; //200 -> 보더/패딩 포함한 가로값
// const circleH = cursor.offsetHeight; //200 -> 보더/패딩 포함한 세로값
// const circle2 = cursor.clientWidth; //190 -> 보더/마진 제외한 가로값
const circle = cursor.getBoundingClientRect(); //getBoundingClientRect : 뷰포트 기준으로 요소 위치 찾아내기 -> 커서의 너비/높이값 구하기
console.log(circle) //위치값 확인
// const DOMRect = {
// x : 0,
// y : 0,
// bottom : 200,
// height : 200,
// left : 0,
// right : 200,
// top : 0,
// width : 200
// }
window.addEventListener("mousemove", (e) => { //마우스를 움직였을 때 이벤트 추가
gsap.to(cursor, { //gsap.to는 css의 animation 효과와 유사
duration: 0.3, //애니메이션 지속 시간을 의미하며 기본은 0.5초. 지속시간이 누적되기 때문에 마우스가 계속 따라오는 것처럼 보임
left: e.pageX - circle.width / 2, //pageX | pageY : 전체 문서를 기준으로 한 값 좌표
top: e.pageY - circle.height / 2, //커서가 가운데에 올 수 있게 /2
});
});
HTML
마우스 효과를 만들기 위한 html 작성법입니다.
<main id="main">
<section id="mouseType">
<div class="mouse__cursor"></div>
<div class="mouse__wrap">
<p><span class="style1">Life</span> is all about <span class="style2">timing.</span> </p>
<p><span class="style3">인생은</span> <span class="style4">타이밍</span> 이다. </p>
</div>
</section>
</main>
<!-- main -->
CSS
마우스 효과를 만들기 위한 css 작성법입니다. 마우스 효과를 위해 cursor는 none으로 설정합니다. 마우스 커서의 백그라운드에 배경 이미지를 넣어줍니다.
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 50%;
background: url(../assets/img/effect_bg12@2x-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed; //위치 고정
border: 5px solid #fff;
}
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| Mouse Effect 05 (3) | 2022.09.28 |
|---|---|
| Mouse Effect 04 (3) | 2022.09.22 |
| PARALLAX Effect 05 (3) | 2022.09.20 |
| PARALLAX Effect 04 (1) | 2022.09.18 |
| SLIDER Effect 04 (2) | 2022.09.18 |
댓글