Mouse Effect04 - 이미지효과

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

document.querySelector(".mouse__img").addEventListener("mousemove", e => {
    document.querySelector(".cursor").style.opacity = "1";
    //커서
    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; 1707    //확대축소로 변함 //창 크기로 변환
    // window.outerWidth; 1536    //창 크기로 변환 
    // window.screen.width 1536   //변화 없음

    //마우스 좌표 값을 가운데 초기화
    //전체 길이/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.to(".mouse__img figure img", {duration: .3, x: centerPageX/20, y: centerPageY/20});

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

document.querySelector(".mouse__img").addEventListener("mouseout", e => {
    document.querySelector(".cursor").style.opacity = "0";
})

• js로 css 제어하기
• gsap
• pageX
• pageY
• getBoundingClientRect
• innerWidth
• innerHeight
• textContent