Mouse Effect - 이미지 오버 효과

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

mouseImg.forEach((item) => {
    const imageWrap = item.querySelector(".img");
    const imageWrapBounds = imageWrap.getBoundingClientRect();
    let itemBounds = item.getBoundingClientRect();

    const onMouseEnter = () => {
        gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation:-15, scale: 0.3, opacity:0});
        gsap.to(imageWrap, {xPercent: -50, yPercent: -50, rotation:0, scale: 1, opacity:1});//gsap를 잘 활용하면 react할때 편함
    };
     const onMouseLeave = () => {
        gsap.to(imageWrap, {xPercent: -50, yPercent:-100, rotation:15, scale:0.3, opacity:0})

    };

    const monMouseMove = ({x, y}) => {
        gsap.to(imageWrap, {
            duration: 1.25,
            x: Math.abs(x - itemBounds.left),
             y: Math.abs(y - itemBounds.top),
        })
    };
    item.addEventListener("mouseenter", onMouseEnter);
    item.addEventListener("mouseleave", onMouseLeave);
    item.addEventListener("mousemove", monMouseMove);
});

 

마우스 이미지 오버 효과 사이트