Mouse Effcet 07. 오버효과

 

 

//설명. 참고사항.

 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.from(imageWrap, {xPercent:50,yPercent:-30, scale:1 });
            };

            const onMouseLeave = ()=>{               
                gsap.to(imageWrap, {xPercent:-50,yPercent:-100, rotation:15, scale:0.3, opacity:0 });
            };
            const onMouseMove = ({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",onMouseMove);
        });