mouseEffect07

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect07.html

마우스 이펙트

 

7번째 마우스 이펙트는 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);
});