Mouse Effect04 - 이미지 효과

Mouse Effect 중 이미지 효과 입니다.

커서를 따라 이미지가 움직입니다 ㅎㅎ

커서 좌표값을 알아서 /2를 하면 정 가운데로 오네요!

커서는 이미지 안에서만 움직이게 했습니다

 

const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom height left right top width x y

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

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

    //마우스 좌표 값을 가운데 초기화
    //전체 가로 
    //window.innerWidth 1920    //브라우저 크기
    //window.outerWidth 1920    //브라우저 크기
    //window.screen.Width 1920  //화면크기
    //window.screen.height 1080 //

    //마우스 좌표 값 기준점 을 가운데로 초기화
    //전체 길이/2 - 마우스 X좌표값 == 0 이됨, 커서가 가운데로 오게됨
    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 으로 이미지 움직이기 
    gsap.to(".mouse__img figure img", {duration: 0.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;
});

https://jiseonpack.github.io/webs_class/javascript/effect/mouseEffect04.html

마우스 이펙트