마우스 이펙트 - 이미지 오버 효과
<main>
<section id="mouseType07">
<div class="cursor"></div>
<div class="mouse__wrap">
<div class="mouse__text">
<p>I Dream my Painting and I Paint my Dream</p>
</div>
<div>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg01.png" alt="">
</div>
<span class="txt">나는 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg02.png" alt="">
</div>
<span class="txt"> 나의 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg03.png" alt="">
</div>
<span class="txt"> 그림을 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg04.png" alt="">
</div>
<span class="txt"> 꿈 꾸고, </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg05.png" alt="">
</div>
<span class="txt"> 내 꿈을 </span>
</a>
<a href="#" class="mouse__img">
<div class="img">
<img src="img/vimg06.png" alt="">
</div>
<span class="txt"> 그린다. </span>
</a>
</div>
</div>
</section>
</main>body::before {
background: rgb(70, 70, 70, 0.33);
}
.mouse__wrap {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
width: 100%;
height: 100vh;
overflow: hidden;
/* cursor: none; */
}
.mouse__text {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
/* height: 100vh; */
overflow: hidden;
}
.mouse__text p {
font-size: 2vw;
margin-bottom: 2vw;
}
.mouse__img {
position: relative;
}
.mouse__img .img {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 400px;
opacity: 0;
}
.mouse__img .txt {
font-size: 3vw;
}
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);
});