마우스 이펙트 3

마우스 효과 만들기 3

스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다.

마우스 이펙트 : 조명 효과

이번 효과는 어두운 배경 이미지가 있고, 마우스 커서가 가리키는 곳은 밝은 것처럼 보이는 효과입니다. 실제로 밝아지는 것은 아니고, 그렇게 보이도록 착시를 일으키는 효과입니다. 어떻게 하는건지 알아볼까요?

HTML 코드

이번에는 기본 마우스 커서를 대신할 요소로 .mouse__cursor 를 만들어 줍니다. mouse__wrap 안에는 p태그로 명언을 적었습니다.

<section id="mousetype">
    <div class="mouse__cursor"></div>
    <div class="mouse__wrap">
        <p>Learn as if you will live forever, live like you will tomorrow.</p>
        <p>영원히 살 것처럼 배우고, 내일 죽을 것처럼 살아라.</p>
    </div>
</section>

CSS 코드

디자인에 관한 css 코드는 이전 유형과 같기 때문에 생략하였습니다. 달라진 것은 .mouse__cursor의 css속성이니 잘 참고해 봅시다!

✔point 속성 몇가지
- background-attachment : fixed하면 배경을 뷰포트에 고정합니다. 이 속성을 이용하여 이미지의 일부분만 보여주어 마치 밝아지는 것처럼 보이게 하였습니다.

.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    z-index: -1;
    border-radius: 50%;
    background-image: url(../assets/img/effect_bg03@2x-min.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    border: 5px solid #fff;
}
body::after {
    background: rgba(0, 0, 0, 0.8);
}

스크립트 작성하기

전체 스크립트 보기

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

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

const circle = cursor.getBoundingClientRect();
console.log(circle);
// {
//     x: 0,
//     y: 0,
//     width: 200,
//     height: 200,
//     top: 0,
//     left: 0,
//     bottom: 200,
//     right: 200
// }

window.addEventListener("mousemove", (e)=>{
    gsap.to(cursor, {
        duration: 0.3,
        left: e.pageX - circle.width/2,
        top: e.pageY - circle.height/2
    });
});

01. 먼저, 스크립트를 작성할 대상이 되는 요소들의 선택자를 만들어 줍니다.

const circleW = cursor.offsetWidth; //200
const circle2 = cursor.clientWidth; //190
offset*과 client*의 값은 비슷한 값을 불러오지만, client는 보더값을 제외하고 불러온다는 차이가 있습니다.

getBoundingClientRect()는 요소의 모든 정보값을 객체로 불러옵니다.

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

02. 마우스가 움직이는 경우의 이벤트를 발생시킵니다.

: addEventListener()의 mousemove 속성을 이용합니다. 여기서 e는 마우스 커서를 의미합니다.

window.addEventListener("mousemove", (e) => {});

03. gsap를 이용해 cursor에 커서의 위치값을 지정해 줍니다.(애니메이션을 준다고 생각합니다.)

: gsap.to( 요소, {애니메이션 값} );
- duration : 애니메이션 지속시간
- left : 왼쪽 좌표 값(이동 위치)
- top : 위쪽 좌표 값(이동 위치)

gsap.to(cursor, {
    duration: 0.3,
    left: e.pageX - circle.width/2, //커서가 중앙에 와야하기 때문에 전체 너비의 반을 빼줍니다.
    top: e.pageY - circle.height/2
});

원본 페이지 보기