Mouse Effect - 텍스트 효과2

설명

특정 글씨에 마우스 오버를 하였을때 이미지가 보여집니다.

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});
    }

	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);
});