mouseEffect07 - 이미지 오버 효과

개요

글씨를 오버하면 이미지가 나오게 한다

 

HTML

<div>
    <a href="#" class="mouse__img">
        <div class="img">
            <img src="./img/vimages01.jpg" alt="이미지1">
        </div>
        <span class="txt">나는 </span>
    </a>
    <a href="#" class="mouse__img">
        <div class="img">
            <img src="./img/vimages02.jpg" alt="이미지2">
        </div>
        <span class="txt"> 성공에 대해 </span>
    </a>​

각각의 글씨에 이미지를 일단 입혀준다

 

CSS

.mouse__text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

.mouse__text p {
    font-size: 2vw;
    margin-bottom: 2vw;
}
.mouse__img {
    position: relative;
}
.mouse__img .img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    opacity: 0;
}

.mouse__img .txt {
    font-size: 3vw;
}

이미지는 포지션 값을 절댓값으로 주자!

그리고 글씨들이 옆으로 나열되도록 display: flex;도 주었다

 

JAVASCRIPT

<script>
    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:-30, scale: 0.3, ease: Power3.easeOut});
            gsap.to(imageWrap, {xPercent: -50, yPercent: -50, rotation: 0, scale: 1, opacity: 1});
        };

        const onMouseLeave = () => {
            gsap.to(imageWrap, {xPercent: -50, yPercent: -100, rotation: 30, 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.bottom)
            })
        };

        item.addEventListener("mouseenter", onMouseEnter);
        item.addEventListener("mouseleave", onMouseLeave);
        item.addEventListener("mousemove", onMouseMove);
    })
</script>​