마우스 이펙트(4)를 만들어보자!

안녕하세용 오늘은 마우스를 따라 이미지를 움직이게 해보겠씁니다 

마우스 이펙트 (4) 만들기

구조 짜기

<main id="main">
    <div class="mouse__wrap">
        <div class="mouse__cursor"></div>
        <div class="mouse__img">
            <figure>
                <img src="img/mouseEffect03-min.jpg" alt="">
                <figcaption>
                    <p>Habit is a second nature.</p>
                    <p>습관은 제2의 천성이다.</p>
                </figcaption>
            </figure>
        </div>
    </div>
</main>
<!-- //main -->

스크립트_gsap

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    document.querySelector(".mouse__img figure").addEventListener("mousemove", e => {
        gsap.to(".mouse__cursor", {
            duration: .2,
            left: e.pageX,
            top: e.pageY
        });

        // 마우스 좌표 값
        let mousePageX = e.pageX;
        let mousePageY = e.pageY;

        // 전체 화면에 가로 값
        // window.innerWidth       // 1920 브라우저
        // window.outerWidth       // 1920 브라우저 크기(스크롤바 포함)
        // window.screen.width     // 1920 화면 크기

        // 마우스 좌표값 기준점 가운데로 설정
        let centerPageX = window.innerWidth / 2 - mousePageX;
        let centerPageY = window.innerHeight / 2 - mousePageY;

        // 이미지 움직이기
        const imgMove = document.querySelector(".mouse__img figure img");

        // imgMove.style.transform = "translate("+centerPageX/20+"px, "+centerPageY/20+"px)";

        gsap.to(imgMove, {
            duration: .2,
            x: centerPageX/20,
            y: centerPageY/20
        })
    });
</script>

먼저, 마우스가 움직일 때마다 mousemove 이벤트를 감지하고, 해당 이벤트 발생 시 gsap.to() 메소드를 사용하여 mouse__cursor 요소의 위치를 마우스 좌표값으로 변경합니다.

그 다음으로, 마우스 좌표값을 기준으로 이미지를 중앙으로 맞추기 위해 centerPageX와 centerPageY 값을 계산합니다. 이 값은 window.innerWidth와 window.innerHeight 값을 사용하여 계산되며, 마우스 위치 값에서 빼줌으로써 마우스 좌표값 기준점을 중앙으로 설정합니다.

이제 gsap.to() 메소드를 사용하여 imgMove 요소의 위치를 변경합니다. x와 y 속성을 사용하여 centerPageX와 centerPageY 값을 나누어 이미지의 위치를 변경합니다. 이 값은 /20으로 나누어주어 움직임을 부드럽게 합니다.

 

완성된 페이지와 코드보기

 

코드 보기