마우스에 효과를 줘보자! [조명효과] - 3

css

<style>
    #header {
        z-index: 100;
    }
    .mouse__wrap {
        cursor: none;
    }
    .mouse__text {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        z-index: 10;
    }
    .mouse__text p {
        font-size: 2vw;
        line-height: 1.6;
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.4);
        background-image: url(img/mouseEffect03-min.jpg);
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
    }
</style>

css 부분입니다.

주의깊게 살펴볼 부분은 .mouse__cursor부분입니다. background image로 이미지를 넣고 background attachment로 고정을 시켜줍니다. attachment라는 속성은 주로 웹 페이지에서 배경 이미지가 스크롤되는 방식을 제어하는 데 사용됩니다.

 

사용하는 방법은 두 가지로 나뉘게 됩니다.

• scroll : 배경 이미지가 요소와 함께 스크롤됩니다. 웹 페이지를 스크롤할 때 배경 이미지도 같이 스크롤됩니다.
• fixed : 배경 이미지가 요소에 고정되어 있으며 스크롤되지 않습니다. 웹 페이지를 스크롤할 때 배경 이미지는 고정된 위치에 유지됩니다.

여기서는 fixed방식이 사용되었고 배경 이미지가 고정되어 있기 때문에 조명효과처럼 보이게 됩니다.

---

script

<script>
    //선택자
    const cursor = document.querySelector(".mouse__cursor");

    // console.log(cursor.clientWidth);    //190 값 지워서 200 
    // console.log(cursor.clientHeight);   //190
    // console.log(cursor.offsetWidth);    //200
    // console.log(cursor.offsetHeight);   //200

   const circle = cursor.getBoundingClientRect();

    const DOMRect = {
        bottom : 200,
        height : 200,
        left : 0,
        right : 200,
        top : 0,
        width : 200,
        x : 0,
        y : 0
    }

    window.addEventListener("mousemove", e => {
        gsap.to(cursor, {
            duration: 0.5,
            left: e.pageX - cursor.clientWidth/2,
            top: e.pageY - cursor.clientHeight/2,
        });


    });
</script>

qurerySelector(선택자)를 사용하기 위해 cursor라는 변수를 만들어주고 그 변수에 mouse corsor이라는 데이터를 담았습니다.

스크립트에서 주의 깊게 봐야할 친구는 바로 이 친구인데요.

• getBoundingClientRect : 이 메서드는 DOM 요소의 크기와 위치 정보를 반환하는 메서드입니다.

이 메서드를 사용하면 요소의 위치와 크기를 쉽게 계산하고, 이를 기반으로 다른 요소들과의 상대 위치를 쉽게 계산할 수 있습니다. 이 메서드를 사용하여 요소의 위치를 계산하면, 페이지에 동적으로 움직이는 요소를 다룰 때 유용합니다.

DOM

DOM은 Document Object Model의 약어로, 자바스크립트에서 웹 페이지의 문서 구조를 나타내는 계층 구조적인 객체 모델을 의미합니다.

const DOMRect에서는  getBoundingClientRect() 메서드를 사용하여 반환되는 객체를 모방하고 있으며, 이를 통해 DOM 요소의 위치와 크기 정보를 가상으로 생성할 수 있습니다.

 

그리고 마지막 부분입니다.

window.addEventListener("mousemove", e => {
    gsap.to(cursor, {
        duration: 0.5,
        left: e.pageX - cursor.clientWidth/2,
        top: e.pageY - cursor.clientHeight/2,
    });

여기서는 마우스의 움직임 이벤트를 감지하고, 해당 이벤트가 발생할 때마다 gsap 라이브러리를 사용하여 커서의 위치를 조정하는 역할을 합니다. addEventListener() 메서드를 사용하여 "mousemove" 이벤트를 감지하고, 이벤트가 발생할 때마다 e 콜백 함수가 실행됩니다. 이 콜백 함수에서는 gsap.to() 메서드를 사용하여 cursor 요소를 애니메이션화 합니다.