[EFFECT] 마우스 효과 03 : 조명 효과

🖱 마우스 효과 : 조명효과 🖱

이번 시간에는 커서에게 조명효과를 주도록 해보겠습니다.😆
배경 이미지를 어둡게한 상태에서 커서 영역에 똑같은 이미지를 넣어주면 그 부분만 밝아 보여 마지 조명을 비춘 듯 한 효과를 볼 수 있답니다~~ 신가하죠~?!
그럼 함께 실습해봅시다~!

---

#1. HTML / CSS 설정하기

! HTML TIP !
페이지 섹션과 마우스 인포(커서 위치값 박스)를 각각 나누어 구조에 맞게 레이아웃을 짠 뒤 스크립트를 위한 선택자를 각각 부여합니다.

✏️ HTML 스크립트 보기

<section id="mouseType03">
    <div class="mouse__cursor"></div>
    <div class="mouse__wrap">
        <p><span class="style1">Energy</span> and <span>persistence</span> conquer all things</p>
        <p><span>기운</span>과 <span>끈기</span>는 모든 것을 이겨낸다.</p>
    </div>
</section>  

! CSS TIP !
position: absolute; : 기존의 마우스 커서를 따라다니도록 포지션을 정해줍니다. (스크립트와 GSAP을 통해 left와 top값이 이동할 때 마다 변하도록 설정해줄 것이므로 왼쪽 상단 모서리에 잠시 위치시켜 줍니다.)
background-attachment: fixed; : 이미지 고정(브라우저 창의 상대적 위치)으로 스크롤을 내려도 이미지가 올라가지 않습니다!

✏️ CSS 스크립트 보기 : 마우스 포인터 / 커서 / 에니메이션효과

/* mouseType */
.mouse__wrap {
    width: 100%;
    height: 100vh;  /* vw를 사용하면 스크롤이 생기므로vh로 작업 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    overflow: hidden;
    cursor: none;
}
.mouse__wrap p {
    font-size: 2vw;
    line-height: 2;
    font-weight: 200;
}
.mouse__wrap p:last-child {
    font-size: 3vw;
    font-weight: 300;
}
.mouse__wrap p span {
    padding-bottom: 3px;
    border-bottom: 0.1vw solid #e7ad00;
    color: #e7ad00;
}

@media (max-width: 800px) {
    .mouse__wrap p {
        padding: 0 20px;
        font-size: 24px;
        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 */
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    z-index: -1;
    border-radius: 50%;
    background-image: url(../assets/img/city_bg05-2.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border: 5px solid #fff;
}

---

#2. JAVASCRIPT : 스크립트 짜기

오늘의 포인트! getBoundingClientRect()메서드를 통해 커서의 위치값과 크기값을 모두 불러옵니다. 그 뒤 커서의 가로, 세로길이를 불러온 뒤 커서를 영역 가운데로 맞춰줍니다!
오늘 스크립트는 간단한 편이니 먼저 주석과 함께 흐름을 이해 한뒤 정리된 전체 스크립트로 다시 한 번 복습해봅시다~!

💡 전체 스크립트 보기

//선택자
const cursor = document.querySelector(".mouse__cursor"); // 커서

// const circleW = cursor.offsetWidth; //200 : 보더 값 포함
// const circleH = cursor.offsetHdight; //200 : 보더 값 포함
// const circle2 = cursor.clientWidth; //190 : 보더 값 제외

const circle = cursor.getBoundingClientRect(); //커서의 모든 위치값
//getBoundingClientRect() 메서드가 불러오는 위치값들 (커서의 영역 크기 == 200*200)
// const DOMRect = {
//     x: 0,
//     y: 0,
//     bottom: 200,
//     height: 200,
//     lift: 0,
//     right: 200,
//     top: 0,
//     width: 200
// }

//마우스가 움직일 때 커서의 이벤트설정
//GSAP으로 설정 : 지속시간 / 커서의 왼쪽 기준 커서의 위쪽 기준으로 커서의 위치값 정하기
window.addEventListener("mousemove", (e) => {
    gsap.to(cursor, {
        duration: 0.3, 
        //커서가 커서 영역 가운데로 오도록 반을 나누어 준다.
        left: e.pageX - circle.width/2,
        top: e.pageY - circle.height/2,
    });            
});

//01 선택자
const cursor = document.querySelector(".mouse__cursor"); // 커서
const circle = cursor.getBoundingClientRect(); //커서의 모든 위치값

//02 마우스가 움직일 때 커서의 이벤트설정 : GSAP
window.addEventListener("mousemove", (e) => {
    gsap.to(cursor, {
        duration: 0.3, 
        left: e.pageX - circle.width/2,
        top: e.pageY - circle.height/2,
    });            
});

✏️ 스크립트 보기 : 자바스크립트

! JAVASCRIPT TIP !
1. 먼저 커서 선택자를 만들어준 뒤 커서의 위치값을 모두 불러올 수 있도록 요소객체의 메서드인 getBoundingClientRect()를 이용해줍니다.
2. 이벤트 리스너의 메서드 중 mousemove를 통해 마우스가 움직일 때 실행되는 요소(커서) 이벤트 함수를 만듭니다.
3. GSAP을 통해 커서를 커서 영역 가운데로 맞춰준 뒤 부드럽게 작동되도록 지속시간을 설정해줍니다.

---

#3. 결과 보기 🎉

원본 소스 보기

원본 페이지 보기