[자바스크립트 응용] 마우스 효과 04 ( 무슨 효과라 해야할지 모르겠음 ^^)

마우스 효과 04

이번 시간에는 정가운데에 있는 그림내부에서만 마우스오버 효과가 작동하고, 이미지가 마우스위치에 따라서 살짝씩 움직이는 효과를 만들어보겠습니다.

---

원본 소스 보기</a > 원본 사이트

---

■ n줄 요약

▶ 그림 위에 클릭이벤트(마우스오버)를 부여해서 그림위에서만 작동할 수 있게 구성하고,
그림의 이동은 마우스좌표값을 화면의 정가운데로 초기화 시킨 뒤 그 값에 포인터 좌표값을 빼주어서 이동효과를 부여합니다.

JS 소스

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

document.querySelector(".mouse__wrap figure").addEventListener("mousemove", (e) => {
    // 커서
    gsap.to(cursor, {
        duration: .5,
        left: e.pageX - cursorRect.width / 2,
        top: e.pageY - cursorRect.height / 2,
    })

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

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

    // 마우스 좌표 값 가운데로 초기화
    // 전체 길이/2 - 마우스 좌표값 == 0
    let centerPageX = window.innerWidth / 2 - mousePageX;
    let centerPageY = window.innerHeight / 2 - mousePageY;

    // 이미지 움직이기
    const imgMove = document.querySelector(".mouse__wrap figure img");
    // imgMove.style.transform = "translate("+centerPageX / 20 +"px, "+ centerPageY / 20 +"px)";
    // js를 쓰면 부드럽지가않아서 gsap로 더 부드럽게 ㄱㄱ

    gsap.to(imgMove, {
        duration: .3,
        x: centerPageX /20,
        y: centerPageY /20,
    })

    // 출력
    document.querySelector(".mousePageX").textContent = mousePageX;
    document.querySelector(".mousePageY").textContent = mousePageY;
    document.querySelector(".centerPageX").textContent = centerPageX;
    document.querySelector(".centerPageY").textContent = centerPageY;
}); 

■ 핵심 찍먹하기🪓

✔ GSAP

CDN으로 항상 스크립트가져오셔야해요!
gsap.to ()에는 2가지 필수값이 필요합니다. 바로 대상과 속성입니다. 그렇다면 우리 소스에서는 어떻게 작동하는걸까요?
사용된 속성은 다음과 같습니다.

- duration : 애니메이션의 지속시간을 설정합니다. 0.3s로 지정했는데 이 지속시간이 계속 누적되어 진행되므로 마치 마우스가 천천히 따라오는듯한 효과를 내는 것입니다.
- left: e.pageX, top : e.pageY : 이제는 다들 아시겠지만 CSS에 left와 top값을 부여했었는데요. 이 값을 pageX,Y(문서 상단 경계 기준으로 좌표값 추출)만큼 이동시킵니다.
- x, y : transform : translate 속성을 의미합니다.

✔ getBoundingClientRect() 이용해서 포인터 위치 조절하기

'mouse__cursor'요소의 각종 속성들을 객체로 불러온 뒤 우리가 필요한 가로, 세로를 뽑아내서 포인터 위치를 조절합니다. (이정돈 이젠 구구절절 설명할 필요가 없겠죠?)
이후에 마우스 좌표값을 변수(mousePageX, Y)로 넣어줍니다. 이후에 그림을 이동할 건데요.
그림을 이동하려면 transform: translate를 이용해야 겠죠? 그래서 마우스 좌표값을 정가운데에 왔을때 (0,0)으로 초기화 해줘야 합니다.
좌표값 정가운데를 0,0으로 만들기 : 전체 길이 /2 - 마우스 포인터 위치(정가운데 있다고 가정) = 0 그렇게 초기화를 하고 마우스포인터 위치값을 빼면 이미지는 좌표의 반대값만큼 이동하게 됩니다.
그리고 이렇게 만들면 너무 많이 이동하니까 ÷ 20을 해서 반대로 조금만 이동하게 만들어서 좀더 그럴듯하게 만들어줍니다. 더 그럴듯하게 만들어 주려면 이미지박스에 'overflow: hidden'을 줍시다.

---

🙇‍♀️ 틀린 점에 대한 지적은 언제나 환영합니다 🙇‍♂️