728x90
반응형
![](https://blog.kakaocdn.net/dn/MIuAn/btrMOofORGx/ChPSqswNEHBoVp0uKKDIk1/img.gif)
마우스 이펙트03 : 조명 효과
마우스 이펙트는 마우스 커서 해당위치에 커서대신 다양한 효과를 주거나 요소에 위치에서 다양한 변화를 주는 효과입니다.
CSS
이번 유형은 마우스 커서에 영역만 선명하게 보여서 강조되는 효과가 보이도록 작업하였습니다.
마우스 영역에 백그라운드를 배경과 같은 사진을 넣고
body::after {
background-color: rgba(0,0,0,0.7);
}
/* mouseType */
.mouse__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
color: #fff;
overflow: hidden;
cursor: none;
}
.mouse__wrap p {
font-size: 2vw;
line-height: 2;
font-weight: 300;
}
.mouse__wrap p span {
border-bottom: 0.15vw dashed rgb(0, 137, 250);
color: rgb(0, 137, 250);
}
.mouse__wrap p:last-child {
font-size: 3vw;
font-weight: 400;
}
@media (max-width: 800px) {
.mouse__wrap p {
padding: 0 20px;
font-size: 20px;
line-height: 1.5;
text-align: center;
margin-bottom: 10px;
}
.mouse__wrap p:last-child {
font-size: 40px;
line-height: 1.5;
text-align: center;
word-break: keep-all;
/* 단어로 줄바꿈 */
}
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
z-index: -1;
border-radius: 50%;
background: #fff;
background-image: url(../../assets/img/effect_bg_02@2x.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed; /*백그라운드의 배경에 스크롤이 안되도록 합니다.*/
border: 5px solid #fff;
}
HTML
html은 명언에 글자마다 다른 스타일의 클래스를 부여하여 다른 애니메이션을 줄 수 있도록 만들었습니다.
<main id="main">
<section id="mouseType">
<div class="mouse__cursor"></div>
<div class="mouse__wrap">
<p>
It does not <span class="style1">matter</span> how slowly you go <span class="style4">as long as</span> you do <span class="style5">not stop.</span>
</p>
<p>
<span class="style6">멈추지</span> 않는다면 얼마나 <span class="style2">천천히</span> 가느냐는 <span class="style3">중요하지 않다.</span>
</p>
</div>
</section>
</main>
Javascript
이번 자바스크립트는 getBoundingClientRect를 사용하여 요소의 넓이 높이 위치 값 등을 객체로 나오게 하였습니다.
객체 형태로 나온 cursor의 값에 width값과 height 값을 가져옵니다.
const cursor = document.querySelector(".mouse__cursor");
// const circleW = cursor.offsetWidth; //200
// const circleH = cursor.offsetHeight;
// const circle2 = cursor.clientWidth; //190 :보더값 제외
const circle = cursor.getBoundingClientRect();
console.log(circle)
// {
// x:0,
// y:0,
// bottom: 200,
// height: 200,
// left: 0,
// right: 200,
// top: 0,
// width: 200,
// }
window.addEventListener("mousemove", (e) => {
gsap.to(cursor, {
duration: 0.5, //마우스가 움직이는 시간을 지정합니다.
left: e.pageX - circle.width/2, (페이지 기준의 x좌표 값 - 원의 넓이/2)
top: e.pageY - circle.height/2,
});
})
결과
반응형
'Effect' 카테고리의 다른 글
마우스 이펙트 : 기울기 효과/ 반전효과 (2) | 2022.09.29 |
---|---|
마우스 이펙트04 : 이미지 효과 (1) | 2022.09.23 |
마우스 이펙트02 - 마우스 따라다니기(GSAP) (1) | 2022.09.22 |
마우스 이펙트01 - 마우스 따라다니기 (1) | 2022.09.22 |
패럴랙스 - 이질감 효과 (5) | 2022.09.20 |