Mouse Effect 07 - 이미지 오버 효과

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

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

        console.log(imageWrapBounds);
        // console.log(itemBounds);

        const onMouseEnter = ()=>{
            gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3});
            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("mousemove", onMouseMove);
        item.addEventListener("mouseenter", onMouseEnter);
        item.addEventListener("mouseleave", onMouseLeave);
    });

 

해당 부분에 마우스를 오버하면 이미지가 나타나고 마우스가 떠나면 이미지가 사라지는 기법이다.

gsap를 이용해서 부드럽게 처리하였고, gsap의 사용법을 간략하게 알아보았다.

자세한건 전체 코드를 참고.

 

 

전체 사이트 보기