Mouse Effect - 이미지 오버 효과

 

자바스크립트를 이용하여 텍스트위에 이미지 오버하면 사진이나오고 지나가면 사라지는 효과를

만들어 봤습니다. 아래 텍스트를 각각 설정하여 이미지를 넣어 이미지는 CSS효과로 안보이게 설정한후

스크립트로 각 영역에 마우스를 오버하면 효과가 생기도록 만들었습니다.

효과들은 모두 gsap을 사용했습니다!

 

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