mouseeffect07 - 이미지 오버 효과

    <script>
        modal();
        tabMenu();

        const mouseImg = document.querySelectorAll(".mouse__img");

         mouseImg.forEach((item) => {   //item = mouseimg
            const imagWrap = item.querySelector(".img")
            const imageWrapBounds = imagWrap.getBoundingClientRect();   //위치값을 가져옴
            let itemBounds = item.getBoundingClientRect();  //item의 위치값

            const onMouseEnter = () => {    //마우스가 영역에 들어왔을때
                gsap.set(imagWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale:0.3, opacity:0});   //set = 설정해주는거
                gsap.to(imagWrap, {xPercent: -50, yPercent: -50, rotation: -0, scale:1, opacity:1})
            }

            const onMouseLever = () => {    //마우스가 영역을 떠났을때
                gsap.to(imagWrap, {xPercent: -50, yPercent: -100, rotation: 15, scale: 0.3, opacity:0})
            }

            const onMouseMove = ({x, y}) => {     //마우스 움직일때
                gsap.to(imagWrap, {
                    duration: 1.25,
                    x: Math.abs(x - itemBounds.left),
                    y: Math.abs(y - itemBounds.top),
                })
            }
            item.addEventListener("mouseenter", onMouseEnter)
            item.addEventListener("mouseleave", onMouseLever)
            item.addEventListener("mousemove", onMouseMove)
        })
    </script>