마우스 이펙트의 조명 효과를 알아보자!

마우스 이펙트 : 조명 효과

이번에는 마우스에 조명 효과를 넣은 이펙트를 코딩해봤습니다.

HTML

HTML 코드는 딱히 어려운 건 없습니다.
각 CSS로 이용할 클래스 이름 지정과 스크립트에 이용할 클래스 이름mouse__cursor 미리 지정해둡니다.
명언은..여러분이 평소에 가진 가치관을 기준으로...?

HTML CODE

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <p><span class="style1">Justice</span> without <span class="style2">power</span> is <span class="style3">incompetence.</span></p>
            <p><span class="style4">힘</span> 없는 <span class="style5">정의</span>는 <span class="style6">무능</span>이다.</p>
        </div>
    </section>
</main>

CSS

이번 CSS 코드는 언제나 전과 같이 원하는 디자인으로 구성했고, 기본적인 반응형도 해주었습니다.

CSS CODE

/* mouseType */
.mouse__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    flex-direction: column;
    cursor: none;
}
.mouse__wrap p {
    font-size: 2vw;
    line-height: 2;
    font-weight: 300;
}
.mouse__wrap p:last-child {
    font-size: 3vw;
    font-weight: 300;
}
.mouse__wrap p span {
        border-bottom: 0.15vw dashed #666;
        color: #b0aaff;
    }
@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.2;
        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-image: url(../assets/img/slide04.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    border: 5px solid #fff;
}

저번 마우스 이펙트와는 다르게 스크롤이 생기는 걸 방지해주기 위해 background-attachment: fixed; 사용해서 고정했습니다.
그리고 이미지를 덮어씌우는 형태로 하기 때문에 위치값을 지정하기 위해 background-position: center center;를 사용해줬습니다.
해당 css의 뜻은 백그라운드의 위치를 정가운데에 고정한다는 의미입니다.

CSS CODE

.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    z-index: -1;
    border-radius: 50%;
    background-image: url(../assets/img/slide04.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    border: 5px solid #fff;
}

SCRIPT

스크립트는 언제나 비슷한 형태이지만, 계속해서 새로운 걸 추가했습니다.

1. 우선 첫 번째는 mouse__cursor를 요소로써 선택자로 잡아줍니다.
2. cursor 요소에 움직일 때마다 전체적인 크기와 위치를 알 수 있는 getBoundingClientRect메서드를 사용해주어 또 다른 circle 요소를 잡아줍니다.
3. css가 적용된 cursor의 요소를 움직여 주기 위해 gsap를 사용해줍니다.
4. 마우스의 움직임을 추가하기 위해서 이벤트 메서드인 addEventListener("mousemove")를 사용해줍니다.
5. 마우스 커서에 좌표 값을 중앙으로 옮겨주기 위해 2번에서 확인한 좌표 값인 circle을 각각 width와 width을 /2로 나눠줍니다.

SCRIPT CODE

const cursor = document.querySelector(".mouse__cursor");

// const circleW = cursor.offsetWidth;    // 200
// const circleH = cursor.offsetHeight;   // 200
// const circle1 = cursor.clientWidth;    // 190 : 보더 값 제외

const circle = cursor.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, {
        duration: 0.5,
        left: e.pageX - circle.width/2,
        top: e.pageY - circle.width/2
    });
});

CODE GO

결과물

SITE GO