마우스 이펙트 - 조명 효과

마우스 효과

마우스 이펙트 - 조명 효과

오늘은 배경을 어둡게 만들고 마우스에 디자인을해서 마우스 영역이 조명이 들어가서 밝은 이미지가 나오는듯한 조명효과를 만들어보겠습니다.

---

결과

원본 소스 보기 원본 사이트 보기

---

HTML 작성

커서는 한개만 만들것이므로 하나 만들어줍니다.

소스 보기

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <p>There is no <span>masterpiece</span> made by a lazy artist.</p>
            <p>게으른 예술가가 만든 <span>명작</span>은 없다.</p>
        </div>
    </section>
</main>

CSS 작성

배경을 평소보다 좀더 어둡게 하고 마우스 커서에 이미지를 넣고 전체사이즈와 맞게 사이즈를 맞추고 고정시킨뒤 zindex 값을 -1을 넣어 보이지 않게 설정후 마우스를 돋보기 모양처럼 만들게 해서 그영역만 이미지가 보이게 합니다.

소스 보기

body::after {
    background: rgba(8, 7, 32, 0.79);
}
/* mouseType */
.mouse__wrap {
    width: 100%;
    height: 100vh;
    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: 300;
}
.mouse__wrap p:last-child {
    font-size: 2.5vw;
    font-weight: 400;
}
.mouse__wrap p span {
    border-bottom: 0.15vw dashed red;
    color: red;
}
@media (max-width: 800px){
    .mouse__wrap p {
        padding: 0 20px;
        font-size: 30px;
        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_bg18@2x.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;  /* 배경 이미지의 위치가 뷰포트 내에서 고정되는지 또는 포함하는 블록과 함께 스크롤되는지 여부를 설정 */
    border: 5px solid #fff;
}

JS 작성

gsap를 사용했습니다. 커서의 가로 좌표값과 세로 좌표값을 offsetWidht,Height로 구할수도 있지만 요즘 자주쓰는 getBoundingClientRect를 이용해서 구해보겠습니다. clg를 사용해 확인하면 x,y,bottom...width값이 모두 나오는데, 우리가 필요한 값인 width와 height만 사용해서 circle.width를 구한뒤 각각 2를 나눠서 가운데로 오게 만들었습니다.

<script src="../assets/js/gsap.min.js"></script>
<script>
    const cursor = document.querySelector(".mouse__cursor");

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

    const circle = cursor.getBoundingClientRect();    //요즘 자주쓰는데 이렇게 전체적으로 나온다 clg로 확인 후 원하는 값을 찾아 계산.
    // 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,         //위드값에 2를 나눠서 가운데로오게
            top: e.pageY - circle.height/2,         //높이값에 2를 나눠서 가운데로오게한다
        });
    });
</script>