마우스 이펙트 03

마우스 이펙트

자바스크립트를 이용한 마우스 효과 만들기 입니다.

---

마우스 이펙트 03 - 조명 효과

원 모양의 커서 안에 숨겨진 뒷 배경이 보이는 효과 입니다.

---

1. 원 만들기

우선 커서가 될 큰 원 하나를 만듭니다. 원을 만들 때 원 안에 배경이 들어가 있어야 합니다.
html 파트는 마우스 이펙트 01을 그대로 사용합니다.

소스보기

//CSS
/* mouseType */
#mouseType {}
.mouse__cursor {}
.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: 500;
}
.mouse__wrap p:last-child {
    font-size: 2.2vw;
    font-weight: 400;
}
.mouse__wrap p span {
    border-bottom: 0.15vw dashed #fcaf16;
    color: #fcaf16;
}
@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.3;
        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_bg14@2x-min.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    border: 5px solid #fff;
}

mouse__cursor의 원 안에 background-image를 사용해 배경 이미지를 넣습니다. 이 때, size, position, attachment를 사용해 배경을 조절합니다.

※ background

background-image : 요소의 배경에 이미지를 삽입합니다.
background-size : 배경 이미지의 크기를 조절합니다. cover은 요소의 크기에 딱 맞게 사진 크기를 조절합니다.
background-position : 배경 이미지의 중심 위치를 조절합니다. center center은 요소의 정중앙에 위치하게 됩니다.
background-attachment : 배경 이미지의 스크롤 방법을 지정합니다. fixed는 전체 영역에서 이미지를 고정시키는 속성입니다.

<각각의 스크롤바를 움직여 보세요. 그리고 화면도 스크롤해 보세요.> ▶ 출처

scroll
CSS 공작소
CSS 공작소
CSS 공작소
CSS 공작소

fixed
CSS 공작소
CSS 공작소
CSS 공작소
CSS 공작소

local
CSS 공작소
CSS 공작소
CSS 공작소
CSS 공작소

2. 커서를 원에 고정

커서를 원 중앙에 고정시켜 마우스가 움직일 때 원이 움직이도록 합니다.

소스보기

자바스크립트 파트
const cursor = document.querySelector(".mouse__cursor");

// const circleW = cursor.offsetWidth;     //200
// const circleH = cursor.offsetHeight;    //200
// const circle2 = cursor.clienttWidth;    //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.3, 
        left: e.pageX - circle.width/2, 
        top: e.pageY - circle.height/2,
        ease: "power2.out"
    });
});

커서의 좌표값을 구한 후 이벤트 메서드로 원의 중앙에 커서를 고정시킵니다.
방식은 gsap를 활용했습니다.

※ getBoundingClientRect( )

엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 객체로 반환합니다.
const DOMRect {
　x: 현재 화면 기준 X축 좌표값,
　y: 현재 화면 기준 Y축 좌표값,
　width: 엘리먼트 가로 크기,
　height: 엘리먼트 세로 크기,
　top: 현재 창기준 세로 시작점 부터 엘리먼트 윗변 까지의 거리
　bottom: 현재 창기준 세로 시작점 부터 엘리먼트 아래변 까지의 거리,
　left: 현재 창기준 가로 시작점 부터 엘리먼트 왼쪽변 까지의 거리,
　right: 현재 창기준 가로 시작점 부터 엘리먼트 오른쪽변 까지의 거리,
}

원본 소스 보기